Unterschied zwischen [routerLink] und routerLink

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

Sie werden dies in allen Anweisungen sehen:

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 einen Wert wie den folgenden haben:

export class myComponent {

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

Aber mit Variablen haben Sie die Möglichkeit, es dynamisch zu machen, oder?

export class myComponent {

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


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Wenn Sie wie ohne Klammern 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>

UPDATE:

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

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

Angenommen, Sie haben

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

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

Wenn Sie auf den Hyperlink Rezepte klicken, springen Sie zu http: // localhost: 4200 / Rezepte

Angenommen, der Parameter ist 1

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

Wenn Sie den dynamischen Parameter 1 an den Link übergeben, navigieren Sie zu http: // localhost: 4200 / prescription / 1

Router Link

routerLink mit Klammern und keiner - einfache Erklärung.

Der Unterschied zwischen routerLink = und [routerLink] ist meistens wie der relative und der absolute Pfad.

Ähnlich wie bei einem href möchten Sie möglicherweise zu ./about.html oder https://your-site.com/about.html navigieren .

Wenn Sie ohne Klammern verwenden, navigieren Sie relativ und ohne Parameter.

my-app.com/dashboard/client

"Springen" von my-app.com/dashboard zu my-app.com/dashboard/client

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

Wenn Sie routerLink mit Klammern verwenden, führen Sie die App aus, um absolut zu navigieren, und Sie können Parameter hinzufügen, wie das Rätsel Ihres neuen Links ist

Zuallererst wird es nicht den "Sprung" von Dashboard / zu Dashboard / Client / Client-ID enthalten und Ihnen Daten von Client / Client-ID liefern, was für EDIT CLIENT hilfreicher ist

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

Der absolute Weg oder die Klammern routerLink erfordern eine zusätzliche Einrichtung Ihrer Komponenten und app.routing.module.ts

Der fehlerfreie Code sagt Ihnen "mehr / was ist der Zweck von []", wenn Sie den Test durchführen. Überprüfen Sie dies einfach mit oder ohne []. Dann können Sie mit Selektoren experimentieren, die - wie oben erwähnt - beim dynamischen Routing helfen.

Angular.io-Selektoren

Sehen Sie, was das routerLink-Konstrukt ist

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