145

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

4

4 回答 4

242

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

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

  <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>
于 2016-12-28T23:22:35.600 回答
21

假设你有

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

于 2017-07-03T07:30:59.127 回答
5

路由器链路

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 的数据，这对 EDIT CLIENT 更有帮助

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

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

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

Angular.io 选择器

查看 routerLink 构造是什么

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

于 2019-11-09T09:48:36.887 回答
1

路由器链接指令：

[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
于 2021-02-26T20:07:56.983 回答