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

116

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

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

— JB Nizet

angular.io/guide/router#routerlink-binding

— Ray

191

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

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

  <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 / recipes.

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

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

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

— Мэтью Чик
источник

3

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

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 со скобками, вы запускаете приложение для абсолютной навигации и можете добавлять параметры, как загадка вашей новой ссылки

во-первых, он не будет включать "переход" с панели инструментов / на панель инструментов / client / client-id и не будет предоставлять вам данные client / client-id, что более полезно для EDIT CLIENT

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

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

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

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

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

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

— Петр Адамковский
источник