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

Ответы (4)

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

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

  

Итак, эта переменная (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';
    }

Там, где, как и без скобок, вы передаете только строку и не можете ее изменить, она жестко запрограммирована, и так будет во всем приложении.


ОБНОВЛЕНИЕ:

Другая особенность использования скобок специально для routerLink заключается в том, что вы можете передавать параметры динамического запроса на ссылку, по которой вы переходите:

Итак, добавляем новую переменную

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

Обновление [routerLink]

  

When you want to click on this link, it would become:

  

Маршрутизатор Link

router Ссылка в скобках и без скобок - простое объяснение.

Разница между routerLink = и [routerLink] в основном как относительный и абсолютный путь.

Подобно href, вы можете перейти к ./about.html или https://your-site.com/about.html.

Когда вы используете без скобок, вы перемещаетесь относительно и без параметров;

my-app.com / панель управления / клиент

"прыгает" с my-app.com / dashboard на my-app.com / dashboard / client

Когда вы используете routerLink со скобками, вы запускаете приложение для абсолютной навигации и можете добавлять параметры, как загадка вашей новой ссылки

во-первых, он не будет включать «прыжок» с приборной панели / на приборную панель / клиент / идентификатор клиента и будет предоставлять вам данные идентификатора клиента / клиента, что более полезно для РЕДАКТИРОВАНИЯ КЛИЕНТА

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

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

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

See whats the routerLink construct

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

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

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

Recipes

Это означает, что щелчок по гиперссылке Рецепты переместит на http://localhost: 4200 / recipes

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


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

2022 WebDevInsider