Różnica między [routerLink] i routerLink

Jaka jest różnica między [routerLink]i routerLink? Jak należy używać każdego z nich?

Zobaczysz to we wszystkich dyrektywach:

Kiedy używasz nawiasów, oznacza to, że przekazujesz właściwość możliwą do powiązania (zmienną).

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

Więc ta zmienna (routerLinkVariable) może być zdefiniowana w twojej klasie i powinna mieć wartość taką jak poniżej:

export class myComponent {

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

Ale dzięki zmiennym masz możliwość uczynienia go dynamicznym, prawda?

export class myComponent {

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


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Gdzie, tak jak bez nawiasów, podajesz tylko ciąg i nie możesz go zmienić, jest to zakodowane na sztywno i tak będzie w całej aplikacji.

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

AKTUALIZACJA :

Inną specjalnością związaną z używaniem nawiasów specjalnie dla routerLink jest możliwość przekazywania parametrów dynamicznych do łącza, do którego nawigujesz:

A więc dodanie nowej zmiennej

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

Aktualizowanie [routerLink]

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

Kiedy chcesz kliknąć ten link, stałoby się:

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

Załóż, że masz

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

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

Oznacza to, że kliknięcie hiperłącza Recipes spowoduje przejście do adresu http: // localhost: 4200 / recipes

Załóżmy, że parametr ma wartość 1

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

Oznacza to, że przekazując parametr dynamiczny 1 do linku, przechodzisz do http: // localhost: 4200 / recipes / 1

Łącze routera

routerLink z nawiasami i brakiem - proste wyjaśnienie.

Różnica między routerLink = i [routerLink] polega głównie na ścieżce względnej i bezwzględnej.

Podobny do href, do którego możesz przejść ./about.html lub https://twoja-witryna.com/about.html .

Kiedy używasz bez nawiasów, nawigujesz względnie i bez parametrów;

my-app.com/dashboard/client

„skakanie” z my-app.com/dashboard do my-app.com/dashboard/client

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

Kiedy używasz routerLink z nawiasami, uruchamiasz aplikację, aby nawigować bezwzględnie i możesz dodać parametry, w jaki sposób układa się zagadka nowego łącza

po pierwsze nie będzie zawierał "skoku" z dashboardu / do dashboardu / client / client-id i przyniesie ci dane klienta / client-id, co jest bardziej pomocne przy EDYCIE KLIENTA

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

Bezwzględny sposób lub nawiasy routerLink wymagają dodatkowej konfiguracji twoich komponentów i app.routing.module.ts

Kod bez błędów „powie Ci więcej / jaki jest cel []” podczas wykonywania testu. Po prostu sprawdź to z lub bez []. Następnie możesz eksperymentować z selektorami, które - jak wspomniano powyżej - pomagają w routingu dynamiki.

Angular.io Selectors

Zobacz, co konstruuje routerLink

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