/ / Angular2 tuberías de inyección de dependencia - javascript, angular, mecanografiado, tuberías-filtros

Inyección de dependencia de tuberías Angular2 - javascript, angular, texto mecanografiado, filtros de tuberías

Hola a todos soy nuevo en Anguler 2 Estoy tratando de crear un tubo / filtro personalizado

pero cuando quiero inyectar la tubería que creé dentro de app.ts no se puede hacer como en la imagen adjunta enter image description here

mi código de componente:

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

}
}

Código de 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>

Respuestas

1 para la respuesta № 1

Debe inyectar el tubo al módulo correspondiente de la siguiente manera, y utilizarlo en el componente

 declarations: [
Filter
]

0 para la respuesta № 2

Debe incluir el Componente de tubería en el Módulo Ng (en el módulo de componente raíz) y usarlo globalmente en todos los componentes

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

Y usalo en plantilla directamente

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

0 para la respuesta № 3

Aquí hay un solución

Escribir

@Component({
pipes: [ filter ]
})

Pero no

@Component({
pipes[Filter]
})