我创建了一个自定义管道。
import { Component, Pipe,PipeTransform} from '@angular/core';
@Component({
selector: 'app-summary',
templateUrl: './summary.component.html',
styleUrls: ['./summary.component.css']
})
@Pipe({
name:'summary'
})
export class SummaryComponent implements PipeTransform {
transform(value:string,args?:any) {
// details
}
在我的app.component.html中。我有
<app-summary></app-summary>
在我的summary.component.html中,我有
<input type="text" [(ngModel)]="title" >
<br>
{{title}}
我想在{{title}}
中使用管道。但似乎管道没有应用。我缺少什么?
修改 我添加了管道代码详细信息。
import { Component, Pipe,PipeTransform} from '@angular/core';
@Component({
selector: 'app-summary',
templateUrl: './summary.component.html',
styleUrls: ['./summary.component.css']
})
@Pipe({
name:'summary'
})
export class SummaryComponent implements PipeTransform {
transform(value:string,args?:any) {
if(!value)
return null;
let prep = ['of','the'];
let splitted = value.split(' ');
for(var i=0;i<splitted.length;i++){
if(i>0 && prep.includes(splitted[i].toLowerCase()))
splitted[i]=splitted[i].toLowerCase();
else
{
splitted[i]= splitted[i].substring(0,1).toUpperCase()+splitted[i].substring(1).toLowerCase();
}
}
return splitted.join(' ');
}
}
答案 0 :(得分:2)
这是实现管道的正确方法:
<强> summary.pipe.ts 强>
import { Pipe,PipeTransform} from '@angular/core';
@Pipe({
name:'summary'
})
export class SummaryPipe implements PipeTransform {
transform(value:string,args?:any) {
// details
}
}
<强> summary.component.ts 强>
import { Component } from '@angular/core';
@Component({
selector: 'app-summary',
templateUrl: './summary.component.html',
styleUrls: ['./summary.component.css']
})
export class SummaryComponent {
}
然后你可以在你的视图中使用这样的管道:
<input type="text" [(ngModel)]="title" >
<br>
{{title | summary }}
请勿忘记在要使用它的NgModule中添加SummaryPipe
:
@NgModule({
declarations: [
SummaryComponent,
SummaryPipe
],
providers: [...]
})
export class SummaryModule { }
答案 1 :(得分:1)
改变这个:
<input type="text" [(ngModel)]="title" >
<br>
{{title}}
对此:
<input type="text" [(ngModel)]="title" >
<br>
{{title | summary}}
渲染summary
时,您实际上并未应用title
管道。
答案 2 :(得分:0)
您需要告诉角度您想要使用该管道,如下所示:
{{title | summary}}