Question

我有3个链接导航到3页。所有三页几乎做一个工作：

 <a *ngIf="item.questionnaireType==1" class="primary small ui icon button" [routerLink]="['/UpdateLikert', item.id]" title="edit">
   <i class="edit   icon"></i>
 </a>
 <a *ngIf="item.questionnaireType==2" class="primary small ui icon button" [routerLink]="['/UpdateForceChoice', item.id]" title="edit">
   <i class="edit  icon"></i>
 </a>
 <a *ngIf="item.questionnaireType==3" class="primary small ui icon button" [routerLink]="['/UpdateChoice', item.id]" title="edit">
   <i class="edit  icon"></i>
 </a>

但我希望有一个链接，通过它的问卷类型动态路由到页面。然后我创建一个管道并注入组件并以下面的方式使用它：

  <-- pipe -->
  import { Pipe, PipeTransform } from '@angular/core';

  @Pipe({
    name: 'questionnaireTypeForRoute'
  })
  export class QuestionnaireTypeForRoutePipe implements PipeTransform {
    transform(value: number, args?: any): string {
      switch (value) {
        case 1: return "/UpdateLikert";
        case 2: return "/UpdateForceChoice";
        case 3: return "/UpdateChoice";
      }
    }
  }

在创建管道后使用一个链接：

 <a  class="primary small ui icon button" [routerLink]="[{{item.questionnaireType | questionnaireTypeForRoute}}, item.id]" title="edit">
   <i class="edit icon"></i>
 </a>

然后我得到模板解析错误。有没有办法使用pipe作为routerLink的url？

Answer 1

我假设您发布的html是因为item属性而在ngFor内。但即使它只是一个对象，您也应该在您的打字稿代码中构建routerLink属性

// component.ts
getData(){
    // let data = get data somehow;

    this.data = data.map(item => {
        let routerLink;

        switch(item.questionnaireType){
             case 1:
                 routerLink = ['/UpdateLikert', item.id];
             break;
             case 2:
                 routerLink = ['/UpdateForceChoice', item.id];
             break;
             case 3:
                 routerLink = ['/UpdateChoice', item.id];
             break;
        }

        return {
            routerLink,
            id: item.id,
            questionnaireType: item.questionnaireType
        }
    });
}

现在您不必在html中复制代码，只需传入routerLink值即可。

// component.html
<div *ngFor="let item of data">
    <a class="primary small ui icon button" [routerLink]="item.routerLink" title="edit">
        <i class="edit  icon"></i>
    </a>
</div>

这基本上是您对管道的要求，但将逻辑移动到组件代码而不是管道。

更新 - 由于您特意询问了管道，我将发布一个带管道的潜在解决方案

// pipe.ts
@Pipe({
    name: 'questionnaireTypeForRoute'
})
export class QuestionnaireTypeForRoutePipe implements PipeTransform {
    transform(value: number, id: number): string {
        switch (value) {
            case 1: return ["/UpdateLikert", id];
            case 2: return ["/UpdateForceChoice", id];
            case 3: return ["/UpdateChoice", id]
        }
    }
}

// component.html
<a class="primary small ui icon button" [routerLink]="item.questionnaireType | questionnaireTypeForRoute : item.id" title="edit">
    <i class="edit   icon"></i>
</a>

所以你可以看到，它类似于component.ts代码。这一切都取决于你想要保持这种逻辑的地方。

如何在angular2中使用管道进行路由器链接？

1 个答案: