Question

大家好我是anguler 2的新手，我正在尝试创建自定义管道/过滤器

但是当我想要注入我在app.ts中创建的管道时，它在附加图像中是不可行的

我的组件代码：

import { Component, OnInit ,Pipe, PipeTransform} from '@angular/core';
import { Input, Injectable, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import {Observable} from 'rxjs/Rx'
import {Filter} from '../filter.pipe';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  pipesp[Filter]

})

export class TestComponent implements PipeTransform  {
    private todos = ['wash dishes', 'Clean the ground','program the site', 'eat'];
  constructor() {
  }

   transform(value: any) {
    if (!value) {
      return '';
    }

  }
}

filter.pipe.ts代码：

import  {Pipe, PipeTransform} from  '@angular/core';
@Pipe({name:'filter'})
export class Filter {
    transform(value,args){
        if(!args[0]){
            return value;
        }else if ( value){
            return value.filter(item => {
                for(let key in item){
                    if((typeof item[key] === 'string' || item[key] instanceof String) && (item[key].indexOf(args[0]) !==-1)){
                        return true;
                    }
                }
            });
        }
    }

}

test.component.html

<input type="text" [(ngModel)]="filterText">
<ul>
    <li *ngFor="let todo of todos | filter: filterText "> 
        {{todo}}
    </li>
</ul>

Answer 1

您应该将Pipe注入相应的模块，如下所示，并在组件

中使用它

 declarations: [
    Filter
]

Answer 2

您需要在Ng模块中包含管道组件（在根组件模块中）并在所有组件中全局使用

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ SearchPipe ],
  bootstrap:    [ AppComponent ]
})

直接在模板中使用

@Component({
  selector: 'my-app',
  template: '<p>My name is <strong>{{ name | search}}</strong>.</p>', 
})

Answer 3

这是solution

写

@Component({
  pipes: [ filter ] 
})

但不是

@Component({
  pipes[Filter]
})

Angular2管道依赖注入

3 个答案: