使用插值设置routerLink

Question

我正在Angular 5中开发一个应用程序

在我的ts文件中,我将字符串数组设置为

breadCumbSetter.bCumb = [
  {name:'Operation',route:'/operation'},
];

在我看来,我正在使用它如下

<ol class="breadcrumb">
        <li class="breadcrumb-item">
          <a [routerLink]="['/dashboard']">
            <i class="fa fa-home"></i>
          </a>
        </li>
        <li class="breadcrumb-item" *ngFor="let item of breadCumbSetter.bCumb">
          <a [routerLink]="['"+{{item.route}}+"']">{{item.name}}</a>
        </li>
      </ol>

我正面临着问题

<a [routerLink]="['"+{{item.route}}+"']">{{item.name}}</a>

我无法在routerLink中设置路由值,我也尝试了很多在网络上找到的建议,

  [routerLink]="item.route"
  routerLink=[item.route]

但没有任何作用,

如何通过插值设置routerLink值,或者在*ngFor循环中有没有其他方法可以做到这一点？

Answer 1

您需要了解@InputAngular中的工作方式以及routerLink接受的内容.

routerLink可以接受一个完整的字符串,这是一个绝对的路由器URL,或一个字符串和数字的数组,它相对于你当前的路由(除非第一项以a开头/)

对于@Inputs:

• routerLink="foo"意味着您将'foo'字符串发送到输入
• [routerLink]="foo"意味着你要发送一个调用foo输入的变量
• routerLink="{{foo}}"意味着你要发送一个调用foo输入的变量
• [routerLink]="'foo'"意味着您将'foo'字符串发送到输入
• [routerLink]="[foo]"意味着您要将一个项目的数组(作为foo变量)发送到输入

既然这样说,你的案例的正确语法应该是

[routerLink]="[item.route]"

你可能认为它等同于

[routerLink]="['"+{{item.route}}+"']"

但事实并非如此.这不起作用,因为您使用变量表示法([routerLink])和外推({{item.route}}).您可以使用其中任何一个,但不能同时使用两者.