[ routerLink ]和 routerLink 之间的区别

[routerLink]和 routerLink的区别是什么? 你应该如何使用它们？

190641 次浏览
小开
最佳答案

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

当您使用括号时，这意味着您正在传递一个可绑定的属性(一个变量)。

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

更新:

使用方括号的另一个特性是可以将动态查询参数传递给导航到的链接:

所以添加一个新变量

export class myComponent {
private dynamicQueryParameter = '129';
public routerLinkVariable = "/home";

更新[ RouterLink ]

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

当你想点击这个链接时，它会变成:

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

假设你有

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

小开

路由器连接

带括号和非简单解释的 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 时，你可以执行应用程序来导航绝对值，你可以添加参数，你的新链接的谜题是什么

首先，它不会包含从 dashboard/到 dashboard/CLIENT/CLIENT-id 的“跳转”，而是带给您 CLIENT/CLIENT-id 的数据，这对于编辑 CLIENT 更有帮助

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

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

当您进行测试时，没有错误的代码将“告诉您更多/[]的目的是什么”。不管有没有这个，你都要检查一下。比你可以实验选择器，如上所述，有助于动态路由。

Angular.io 选择器

看看 routerLink 的结构

Https://angular.io/api/router/routerlink#selectors

小开

路由器连接指令:

[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

提交答案