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
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 № 1Debe 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]
})