angular - [routerLink] 和 routerLink 的区别

Question

[routerLink] 和 routerLink 有什么区别？你应该如何使用它们？

Answer 1

您会在所有指令中看到这一点:

当您使用括号时，这意味着您正在传递一个可绑定(bind)属性(一个变量)。

  <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 dynamicQueryParameter = '129';
        public routerLinkVariable = "/home"; 

更新 [routerLink]

  <a [routerLink]="[routerLinkVariable]"[queryParams]="{unit: dynamicQueryParameter}"></a>

当你想点击这个链接时，它会变成:

  <a href="/home?unit=129"></a>