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

Ответ 1

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

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

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

Ответ 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