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

Question

В чем разница между [routerLink] а также routerLink? Как вы должны использовать каждый?

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

      [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