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

您需要了解@Input在Angular中的工作方式以及routerLink接受的内容。

routerLink可以接受一个完整的字符串（它是绝对的路由器URL），也可以接受一个字符串和数字数组，该字符串和数字相对于您当前的路由（除非第一项以/开头）

对于@Input s：

routerLink="foo"意味着您要将'foo'作为字符串发送到输入
[routerLink]="foo"表示您正在向输入发送名为foo的变量
routerLink="{{foo}}"表示您正在向输入发送名为foo的变量
[routerLink]="'foo'"意味着您要将'foo'作为字符串发送到输入
[routerLink]="[foo]"表示您正在将一个包含项foo的项的数组发送到输入

现在这样说，适合您情况的正确语法应该是

[routerLink]="[item.route]"

您可能会认为它等同于

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

但不是。这将不起作用，因为您使用的是变量符号（[routerLink]）和外推（{{item.route}}）。您可以使用其中任何一个，但不能同时使用两者。

通过插值设置routerLink

1 个答案: