Різниця між [routerLink] та routerLink

116

У чому різниця між [routerLink]і routerLink? Як слід використовувати кожен?

Вони ті ж директиви. Перший використовується для передачі динамічного значення, а другий - для передачі статичного шляху у вигляді рядка. Про це детально йдеться в документації: angular.io/docs/ts/latest/api/router/index/…

— JB Nizet

angular.io/guide/router#routerlink-binding

— Рей

190

Ви побачите це у всіх директивах:

Якщо ви використовуєте дужки, це означає, що ви передаєте властивість, пов’язану зі зміною (змінною).

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

Тож ця змінна (routerLinkVariable) може бути визначена всередині вашого класу, і вона повинна мати значення, як нижче:

export class myComponent {

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

Але зі змінними у вас є можливість зробити це динамічним правильно?

export class myComponent {

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


    updateRouterLinkVariable(){

        this.routerLinkVariable = '/about';
    }

Якщо без дужок ви передаєте лише рядок, і ви не можете її змінити, це важко закодовано, і це буде так у вашому додатку.

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

ОНОВЛЕННЯ:

Інша особливість використання дужок спеціально для routerLink - це те, що ви можете передати динамічні параметри до посилання, до якого ви переходите:

Тож додавання нової змінної

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

Оновлення [routerLink]

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

Коли ви хочете натиснути на це посилання, воно стане:

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

— Мілад
джерело

11

Відмінне пояснення! Дякую! +1

— fablexis

15

Припустимо, що у вас є

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

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

Це означає, що натискання на гіперпосилання Рецепти перейде на http: // localhost: 4200 / recepts

Припустимо, що параметр дорівнює 1

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

Це означає, що передаючи динамічний параметр 1 на посилання, ви переходите до http: // localhost: 4200 / recepts / 1

— курча matthew
джерело

3

Маршрутизатор Посилання

router Посилання з дужками і жодним - просте пояснення.

Різниця між routerLink = та [routerLink] здебільшого нагадує відносний та абсолютний шлях.

Схожий на href, до якого ви можете перейти ./about.html або https://your-site.com/about.html .

Якщо ви користуєтесь без дужок, тоді ви переходите відносно і без парам;

my-app.com/dashboard/client

"стрибки" з my-app.com/dashboard на my-app.com/dashboard/client

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

Якщо ви використовуєте routerLink з дужками, тоді ви виконуєте додаток для навігації по абсолюту, і ви можете додати параметри, як складається головоломка вашого нового посилання

Перш за все, він не буде включати "стрибок" з приладової панелі / на інформаційну панель / клієнт / клієнт-ідентифікатор і принесе вам дані клієнта / клієнт-ідентифікатора, що корисніше для редагування КЛІЄНТА

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

Абсолютний спосіб або дужки маршрутизатора Посилання вимагають додаткового налаштування компонентів та app.routing.module.ts

Код без помилок "підкаже вам більше / яка мета []" під час тестування. Просто перевірте це з або без []. Тоді ви можете експериментувати з селекторами, що - як згадувалося вище - допомагає в динаміці маршрутизації.

Вибірці Angular.io

Подивіться, що конструктив маршрутизатора

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

— Пьотр Адамковський
джерело