我有一个组件,它有自己的数据,我想使用ngFor和管道在模板中过滤 . 该组件将接受将用于过滤的搜索值 .
Component
@Component({
selector: 'seach-results',
...
)}
export class SearchResultsComponent implements OnInit {
@Input('searchValue') searchValue;
contacts: any[] = [
{ name: 'John Doe', phone: '123-123-1234' }
...
}
Template
<div *ngFor="let item of contacts | phone:searchValue>
<div class="name">{{item.name}}</div>
<div class="phone">{{item.phone}}</div>
</div>
Pipe
@Pipe({
name: 'phone'
})
export class PhonePipe {
transform(items: any[], args) {
return items.filter(
item => item.name.toLowerCase().indexOf(args.toLowerCase()) !== -1
);
}
}
我无法弄清楚的是,如何在组件内部识别“手机”管道 . 我可以让它工作的唯一方法是我在NgModule中声明了电话管道 . 这是唯一的方法吗?我觉得这应该以某种方式自包含在组件中 . 它看起来曾经是一个已被弃用的角度2组件中的“管道”描述,但我找不到任何可以解释你应该做什么的东西 . 思考?
2 回答
将管道限制为特定组件的唯一方法是对管道和组件使用单独的
ngModule
,然后仅导出组件,以便可以在另一个模块中使用它 . 请参阅下面的演示 .SearchResultsModule:
AppModule:
Plunkr演示
是的,你是对的 . 它必须在NgModule中 . 我没有看到将它留在那里的伤害 . 为什么要将管道限制为仅一个组件?如果你只需要一个组件,我就不会使用管道 .
Answer 否则,您可以将管道放入组件中,在您声明组件的同一NgModule中的providers数组中声明该管道,它应该可以正常工作 .
看看这个编辑过的Heroes Tour plunkr:https://embed.plnkr.co/gYyZANyZAJGmzaPFLG7n/
导航到仪表板组件 . 看看那个和主要的模块 . 让我知道如果我需要解释更多 . 如果你真的想要包含该组件中的所有内容,你可以为你的组件提供自己的@NgModule,但无论你做什么,你都必须在某处进行一些expot / import . 在我看来,只需在主模块的providers数组中导入Pipe是最简单的 .
https://angular.io/docs/ts/latest/guide/pipes.html
Edited code