[routerLink]和routerLink之间的区别

Question

[routerLink]和之间有什么区别routerLink？你应该如何使用每一个？

Answer 1

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

使用括号时,表示您正在传递可绑定属性(变量).

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

Answer 2

假设你有

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

<a routerLink ="recipes">Recipes</a>

这意味着单击Recipes超链接将跳转到http:// localhost:4200/recipes

假设参数为1

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

这意味着将动态参数1传递给链接,然后导航到 http:// localhost:4200/recipes/1

Answer 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的数据，这对编辑客户端更有帮助

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

绝对方式或括号 routerLink 需要额外设置您的组件和 app.routing.module.ts

当你进行测试时，没有错误的代码会“告诉你更多/[]的目的是什么”。只需检查带或不带[]即可。您可以尝试使用选择器（如上所述），这有助于动态路由。

Angular.io 选择器

查看 routerLink 构造是什么

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