[routerLink]和routerLink之间的区别


Answers:


190

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

使用方括号时,意味着要传递一个可绑定的属性(变量)。

  <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


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时,您将执行应用程序以浏览绝对路径,并可以添加参数以了解新链接的困惑之处

首先,它不会包括从仪表板/到仪表板/客户端/客户端ID的“跳转”,并为您带来客户端/客户端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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.