web-dev-qa-db-fra.com

Différence entre [routerLink] et routerLink

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

angularroutesrouterlinkangular-routerlink
72
Eslam Tahoon

Vous verrez cela dans toutes les directives:

Lorsque vous utilisez des crochets, cela signifie que vous transmettez une propriété pouvant être liée (une variable).

  <a [routerLink]="routerLinkVariable"></a>

Donc, cette variable (routerLinkVariable) pourrait être définie dans votre classe et devrait avoir une valeur comme ci-dessous:

export class myComponent {

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

Mais avec les variables, vous avez la possibilité de le rendre dynamique, non?

export class myComponent {

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


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Où, sans crochets, vous ne faites que passer une chaîne de caractères et vous ne pouvez pas le changer, le code est dur et ce sera comme ça dans toute votre application.

<a routerLink="/home"></a>

PDATE:

L'autre spécialité sur l'utilisation des crochets spécifiquement pour routerLink est que vous pouvez transmettre des paramètres dynamiques au lien sur lequel vous naviguez:

Donc ajouter une nouvelle variable

export class myComponent {
        private dynamicParameter = '129';
        public routerLinkVariable = "/home";

Mise à jour du [routerLink]

  <a [routerLink]="[routerLinkVariable,dynamicParameter]"></a>

Lorsque vous souhaitez cliquer sur ce lien, il deviendra:

  <a href="/home/129"></a>
129
Milad

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 le paramètre dynamique 1 est passé au lien, puis vous accédez à http: // localhost: 4200/recipes/1

15
matthew chick