[routerLink] 和 routerLink 的区别

Posted 2023-02-19

【中文标题】[routerLink] 和 routerLink 的区别

【英文标题】：Difference between [routerLink] and routerLink

【发布时间】：2017-05-13 06:01:24

【问题描述】：

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

【问题讨论】：

它们是相同的指令。您使用第一个传递动态值，第二个传递静态路径作为字符串。这在文档中有详细说明：angular.io/docs/ts/latest/api/router/index/…

angular.io/guide/router#routerlink-binding

【参考方案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>

【讨论】：

很好的解释！谢谢！ +1

嗯，使用括号和 routerLink = "myLinkVariable" 是不是一样？因为它也使用变量所以没有区别。

两种解释不是说的完全一样吗？

您的 queryParams 周围缺少方括号，应该是：<a [routerLink]="[routerLinkVariable]" [queryParams]="unit: dynamicQueryParameter"></a>，另请参见：***.com/a/37880877/530884

【参考方案2】：

路由器链接指令：

[routerLink]="link"                  //when u pass URL value from COMPONENT file
[routerLink]="['link','parameter']" //when you want to pass some parameters along with route

 routerLink="link"                  //when you directly pass some URL 
[routerLink]="['link']"              //when you directly pass some URL

【参考方案3】：

路由器链接

routerLink 带括号且无括号 - 简单说明。

routerLink= 和 [routerLink] 的区别主要是相对路径和绝对路径。

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

当您使用不带括号时，您可以相对导航且不带参数；

my-app.com/dashboard/client

从 my-app.com/dashboard“跳跃”到 my-app.com/dashboard/client

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

当您使用带括号的 routerLink 时，您执行应用程序以绝对导航，您可以添加参数，您的新链接的谜题如何

首先它不会包含从dashboard/到dashboard/client/client-id的“跳转”，并为您带来client/client-id的数据，这对EDIT CLIENT更有帮助

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

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

当您进行测试时，没有错误的代码将“告诉您更多/[] 的目的是什么”。只需检查是否有 []。比您可以尝试使用选择器 - 如上所述 - 有助于动态路由。

Angular.io Selectors

看看 routerLink 结构是什么

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

【参考方案4】：

假设你有

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