代码之家  ›  专栏  ›  技术社区  ›  Bigeyes

自定义管道到模板URL

  •  0
  • Bigeyes  · 技术社区  · 8 年前

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

    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>  
    

    <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 回复  |  直到 8 年前
        1
  •  2
  •   msanford    8 年前

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

    别忘了添加 SummaryPipe 在要使用它的NgModule中:

    @NgModule({
      declarations: [
        SummaryComponent,
        SummaryPipe
      ],
      providers: [...]
    })
    export class SummaryModule { }
    
        2
  •  1
  •   Lansana Camara    8 年前

    更改此项:

    <input type="text" [(ngModel)]="title" >
    <br>
    {{title}}
    

    <input type="text" [(ngModel)]="title" >
    <br>
    {{title | summary}}
    

    summary title .

        3
  •  0
  •   Dhyey    8 年前

    您需要告诉angular,您希望使用以下管道:

    {{title | summary}}
    
    推荐文章