如何在angular2中使用路由器链路的管道？

我有3个链接用于导航到3个页面。所有三个页面几乎都可以完成一项工作：

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

从“@angular/core”导入{Pipe，PipeTransform}；
@烟斗({
名称：“questionnaireTypeForRoute”
})
导出类问题ReTypeForRoutePie实现PipeTransform{
转换（值：数字，参数？：任意）：字符串{
开关（值）{
案例1：返回“/UpdateLikert”；
案例2：返回“/UpdateForceChoice”；
案例3：返回“/UpdateChoice”；
}
}
}

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

然后我得到了模板解析错误。

---

有没有办法使用管道作为routerLink的url？

我假设您发布的html位于ngFor中，因为有

项属性。但即使它只是一个对象，也应该在typescript代码中构建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>

//component.html

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


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

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

//pipe.ts
@烟斗({
名称：“questionnaireTypeForRoute”
})
导出类问题ReTypeForRoutePie实现PipeTransform{
转换（值：数字，id：数字）：字符串{
开关（值）{
案例1：返回[“/UpdateLikert”，id]；
案例2：返回[“/UpdateForceChoice”，id]；
案例3：返回[“/UpdateChoice”，id]
}
}
}
//component.html

您可以看到，它类似于component.ts代码。这完全取决于您希望将这种逻辑保留在何处。
删除{{和}}。你已经在一个有角度的表达式中了。这就是说，在一个逻辑页面上有三个不同的URL是很奇怪的：更新一份调查问卷。应该只有一个，该URL上的组件应该是显示第一个、第二个或第三个组件的组件，具体取决于调查问卷的类型。@jbnize感谢您的帮助，它正在工作，但对于第二部分，请帮助我更多…您的意思是我使用嵌套路由吗？…请为我介绍一个sourceNo。如果您觉得这是您应该做的，只需使用一个组件，在您正在做的时候使用gIf，并插入三个组件中的一个。类似于
…