自定义管道到templateUrl

时间:2017-07-24 13:30:10

标签: angular angular-pipe

我创建了一个自定义管道。

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(' ');
  }
}

3 个答案:

答案 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}}