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

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>

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

Answer 1

由于item属性，我假设你发布的html在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代码。这一切都取决于你想要保持这种逻辑的地方。