[routerLink] 和 routerLink 有什么区别？你应该如何使用每一个？
【问题讨论】：
标签： angular routes routerlink angular-routerlink
你会在所有指令中看到这一点：
当您使用括号时，这意味着您正在传递一个可绑定的属性（一个变量）。
<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>
【讨论】：
<a [routerLink]="[routerLinkVariable]" [queryParams]="{unit: dynamicQueryParameter}"></a>，另请参见：stackoverflow.com/a/37880877/530884
路由器链接指令：
[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
【讨论】：
路由器链接
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
当您进行测试时，没有错误的代码将“告诉您更多/[] 的目的是什么”。只需检查是否有 []。比您可以尝试使用选择器 - 如上所述 - 有助于动态路由。
看看 routerLink 结构是什么
【讨论】：
假设你有
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
【讨论】：