Разница между [routerLink] и routerLink

Вы увидите это во всех директивах:

Когда вы используете скобки, это означает, что вы передаете привязываемое свойство (переменную).

  <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="/home/129"></a>

Предположим, что у вас есть

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

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

Это означает, что щелчок по гиперссылке «Рецепты» приведет к переходу на http://localhost:4200/recipes.

Предположим, что параметр равен 1

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

Это означает, что при передаче динамического параметра 1 ссылке вы переходите к http://localhost:4200/recipes/1

Ссылка на маршрутизатор

router Link с скобками и без - простое объяснение.

Разница между 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

Абсолютный способ или скобки routerLink требуют дополнительной настройки ваших компонентов и app.routing.module.ts

Код без ошибок «расскажет вам больше / какова цель []», когда вы сделаете тест. Просто проверьте это с [] или без него. Затем вы можете поэкспериментировать с селекторами, которые, как упоминалось выше, помогают с динамической маршрутизацией.

Селекторы Angular.io

Посмотрите, что такое конструкция routerLink

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

ДИРЕКТИВА МАРШРУТИЗАТОРА:

[routerLink]="link"                  //when u pass URL value from COMPONENT file
[routerLink]="['link','parameter']" //when you want to pass some parameters along with route

 routerLink="link"                  //when you directly pass some URL 
[routerLink]="['link']"              //when you directly pass some URL