La différence entre [routerLink] et routerLink

Quelle est la différence entre [routerLink] et routerLink ? Comment devriez-vous utiliser?

Elles sont de la même directive. Vous utilisez le premier à passer une valeur dynamique, et la seconde pour passer d'un chemin d'accès statique comme une chaîne de caractères. Ceci est détaillé dans la documentation: angulaire.io/docs/ts/latest/api/routeur/index/...
angulaire.io/guide/routeur#routerlink de liaison

InformationsquelleAutor Eslam Tahoon | 2016-12-28

137

Vous verrez cela dans toutes les directives:

Lorsque vous utilisez des parenthèses, cela signifie que vous êtes en passant une propriété liable (une variable).
```
  <a [routerLink]="routerLinkVariable"></a>
```
De sorte que cette variable (routerLinkVariable) pourrait être défini à l'intérieur de votre classe et il doit avoir une valeur comme ci-dessous:
```
export class myComponent {

    public routerLinkVariable = "/home"; //the value of the variable is string!
```
Mais avec des variables, vous avez la possibilité de le rendre dynamique le droit?
```
export class myComponent {

    public routerLinkVariable = "/home"; //the value of the variable is string!


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }
```
Où que sans crochets vous êtes de passage de la chaîne et vous ne pouvez pas le changer, c'est codée en dur et ça va être comme ça tout au long de votre application.
```
<a routerLink="/home"></a>
```
Mise à JOUR :

L'autre spécialité sur l'utilisation de supports spécifiquement pour routerLink est que vous pouvez passer des paramètres dynamiques sur le lien vous vous dirigez vers:

L'ajout d'une nouvelle variable
```
export class myComponent {
        private dynamicParameter = '129';
        public routerLinkVariable = "/home"; 
```
La mise à jour de la [routerLink]
```
  <a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>
```
Lorsque vous souhaitez, cliquez sur ce lien, il allait devenir:
```
  <a href="/home/129"></a>
```
- Excellente explication! Merci! +1
InformationsquelleAutor Milad
15

Supposons que vous avez
```
const appRoutes: Routes = [
  {path: 'recipes', component: RecipesComponent }
];

<a routerLink ="recipes">Recipes</a>
```
Cela signifie qu'en cliquant sur les Recettes de lien hypertexte permet de passer à http://localhost:4200/recipes

Supposons que le paramètre est 1
```
<a [routerLink] = "['/recipes', parameter]"></a>
```
Cela signifie que la transmission de paramètre dynamique, 1 pour le lien, puis vous accédez à
http://localhost:4200/recipes/1

InformationsquelleAutor matthew chick
0

Routeur Lien

routerLink avec des crochets et aucun simple explenation.

La différence entre routerLink= et [routerLink] est la plupart du temps comme relative et absolue chemin.
Simmilar à un href, vous pouvez naviguer vers ./about.html ou https://your-site.com/about.html.

Lorsque vous utilisez sans crochets, puis vous accédez relative et sans params;

my-app.com/dashboard/client

"saut" de my-app.com/dashboard à my-app.com/dashboard/client
```
<a routerLink="client/{{ client.id }}" .... rest the same
```
Lorsque vous utilisez routerLink avec des crochets puis vous exécutez l'application pour naviguer absolue et vous pouvez ajouter des params comment est le puzzle de votre nouveau lien

tout d'abord, il ne comprendra pas le "saut" tableau de bord/tableau de bord/client/client-id et vous apporter des données de client/client-id qui est plus utile pour MODIFIER CLIENT
```
<a [routerLink]="['/client', client.id]" ... rest the same
```
L'absolu moyen des crochets ou des routerLink nécessitent une configuration supplémentaire de vous des composants et de l'application.le routage.le module.ts

Le code sans erreur "vous en dire plus/quel est le but de []" lorsque vous effectuez le test. Il suffit de cocher cette avec ou sans []. Que vous pouvez des expériences avec des sélecteurs qui - comme mentionné ci - dessus contribue à la dynamique de routage.

Angulaire.io Sélecteurs

De voir à quoi le routerLink construire

https://angular.io/api/router/RouterLink#selectors

InformationsquelleAutor Piotr Adamkowski

Vous devez vous connecter pour publier un commentaire.

Routeur Lien