我有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？
由于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代码。这完全取决于您想保留这种逻辑的位置。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句