如何在angular2中为路由器link使用管道？

Question

我有 3 个 link 用于导航到 3 个 page.all 三个页面几乎可以完成一项工作：

 <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>

但我想要一个 link 可以根据问卷类型动态路由到页面。然后我创建一个管道并注入组件并通过以下方式使用它：

  <-- 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";
      }
    }
  }

在创建管道后使用一个 link：

 <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

我假设你的 posted html 在 ngFor 中，因为 item 属性。但即使它只是一个对象，你也应该在你的打字稿代码中构建一个 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>

这本质上就是您要求的管道，但将逻辑移入您的组件代码而不是管道。

更新 - 因为你特别询问了一个管道，我会post一个可能的管道解决方案

// 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中为路由器link使用管道？

how to use pipe for router link in angular2?

angular-routing

angular2-routing

angular-pipe

angular

angular-router