it-swarm.com.de

Unterschied zwischen [routerLink] und routerLink

Was ist der Unterschied zwischen [routerLink] und routerLink? Wie solltest du jeden verwenden?

72
Eslam Tahoon

Das sehen Sie in allen Anweisungen:

Wenn Sie Klammern verwenden, bedeutet dies, dass Sie eine bindbare Eigenschaft (eine Variable) übergeben.

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

Diese Variable (routerLinkVariable) kann also in Ihrer Klasse definiert werden und sollte den folgenden Wert haben:

export class myComponent {

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

Aber mit Variablen haben Sie die Möglichkeit, sie dynamisch zu gestalten, oder?

export class myComponent {

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


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Wo wie ohne eckige Klammern Sie nur Zeichenfolgen übergeben und diese nicht ändern können, ist sie fest codiert und wird in Ihrer gesamten App so sein.

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

PDATE:

Die andere Besonderheit bei der Verwendung von Klammern speziell für RouterLink besteht darin, dass Sie dynamische Parameter an den Link übergeben können, zu dem Sie navigieren:

Fügen Sie also eine neue Variable hinzu

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

Aktualisieren des [routerLink]

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

Wenn Sie auf diesen Link klicken möchten, wird daraus:

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

Angenommen, Sie haben

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

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

Das bedeutet, dass durch Klicken auf den Hyperlink Rezepte zu http: // localhost: 4200/recipes gesprungen wird

Angenommen, der Parameter ist 1

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

Dies bedeutet, dass Sie den dynamischen Parameter 1 an den Link übergeben und dann zu http: // localhost: 4200/recipes/1 navigieren

15
matthew chick