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

更新routerLink

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

当您想要单击此链接时，它将变成：

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

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

Answer 3

路由器链接

routerLink有括号，没有-简单的解释。

routerLink=与routerLink的差异主要表现为相对路径和绝对路径。

类似于您可能希望导航到的./约. href或https://your-site.com/about.html的href。

当你使用没有括号，然后你导航相对和没有参数；

My-app.com/仪表板/客户端

从my-app.com/dashboard跳到my-app.com/dashboard/client

<a routerLink="client/{{ client.id }}" .... rest the same

当您使用带括号的routerLink时，您将执行app以绝对导航，并且可以添加params，新链接的拼图如何？

首先，它将不包括从仪表板/跳转到仪表板/ client/ CLIENT -id，并带来CLIENT/CLIENT-id的数据，这对编辑客户端更有帮助。

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

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

在进行测试时，没有错误的代码将“告诉您更多/什么是[]的目的”。不管有没有[]，只要检查一下。比你可能实验的选择器，正如上面提到的-有助于动态路由。

Angular.io选择器

参见routerLink结构的内容

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