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


116

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


To ta sama dyrektywa. Pierwszy służy do przekazywania wartości dynamicznej, a drugiego do przekazywania statycznej ścieżki w postaci ciągu. Jest to szczegółowo opisane w dokumentacji: angular.io/docs/ts/latest/api/router/index/…
JB Nizet

Odpowiedzi:


190

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>

11
Doskonałe wyjaśnienie! Dzięki! +1
fablexis


3

Łą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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.