Différence entre [routerLink] et routerLink

116

Quelle est la différence entre [routerLink]et routerLink? Comment utiliser chacun d'eux?

— Eslam Tahoon
source

C'est la même directive. Vous utilisez le premier pour transmettre une valeur dynamique et le second pour transmettre un chemin statique sous forme de chaîne. Ceci est détaillé dans la documentation: angular.io/docs/ts/latest/api/router/index/…

— JB Nizet

angular.io/guide/router#routerlink-binding

— Ray

190

Vous verrez cela dans toutes les directives:

Lorsque vous utilisez des crochets, cela signifie que vous passez 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 elle 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';
    }

Là où, sans crochets, vous ne passez que de la chaîne et vous ne pouvez pas la modifier, c'est codé en dur et ce sera comme ça dans toute votre application.

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

METTRE À JOUR :

L'autre spécialité concernant l'utilisation de parenthèses spécifiquement pour routerLink est que vous pouvez transmettre des paramètres dynamiques au lien vers lequel vous naviguez:

Donc en ajoutant une nouvelle variable

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

Mise à jour de [routerLink]

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

Lorsque vous voudriez cliquer sur ce lien, cela deviendrait:

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

— Milad
source

11

Excellente explication! Merci! +1

— fablexis

15

Supposons que vous ayez

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

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

Cela signifie qu'en cliquant sur le lien hypertexte Recipes, vous accédez à http: // localhost: 4200 / recettes

Supposons que le paramètre est 1

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

Cela signifie qu'en passant le paramètre dynamique, 1 au lien, vous accédez à http: // localhost: 4200 / recettes / 1

— matthew poussin
source

3

Lien de routeur

routerLink avec des crochets et aucun - explication simple.

La différence entre routerLink = et [routerLink] est principalement comme un chemin relatif et absolu.

Semblable à un href, vous voudrez peut-être naviguer vers ./about.html ou https://your-site.com/about.html .

Lorsque vous utilisez sans crochets, vous naviguez de manière relative et sans paramètres;

my-app.com/dashboard/client

"sauter" de my-app.com/dashboard vers my-app.com/dashboard/client

<a routerLink="client/{{ client.id }}" .... rest the same

Lorsque vous utilisez routerLink avec des crochets, vous exécutez l'application pour naviguer dans l'absolu et vous pouvez ajouter des paramètres comment est le puzzle de votre nouveau lien

tout d'abord, il n'inclura pas le "saut" du tableau de bord / au tableau de bord / client / id-client et vous apportera les données du client / id-client, ce qui est plus utile pour EDIT CLIENT

<a [routerLink]="['/client', client.id]" ... rest the same

La méthode absolue ou les parenthèses routerLink nécessitent une configuration supplémentaire de vos composants et app.routing.module.ts

Le code sans erreur "vous en dira plus / quel est le but de []" lorsque vous effectuez le test. Vérifiez simplement ceci avec ou sans []. Ensuite, vous pouvez expérimenter avec des sélecteurs qui - comme mentionné ci-dessus - aident au routage dynamique.

Sélecteurs Angular.io

Voir quelle est la construction routerLink

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

— Piotr Adamkowski
source