Différence entre [routerLink] et routerLink

Question

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

Answer 1

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 deviendrait:

  <a href="http://stackoverflow.com/home/129"></a>

Answer 2

Suppose que tu as

 const appRoutes: Routes = [
  {path: 'recipes', component: RecipesComponent }
];

<a routerLink ="recipes">Recipes</a>
 

Cela signifie que cliquer sur le lien hypertexte Recipes vous mènera à http: // localhost: 4200 / recipes

Supposons que le paramètre est 1

 <a [routerLink] = "['/recipes', parameter]"></a>
 

Cela signifie que vous passez le paramètre dynamique, 1 au lien, puis vous accédez à http: // localhost: 4200 / recipes / 1