要重用组件以显示经过筛选的集合,您可以按照以下步骤操作:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-filtered-collection',
template: `
- {{ item }}
`
})
export class FilteredCollectionComponent {
@Input() filteredCollection: any[];
}
import { Component } from '@angular/core';
@Component({
selector: 'app-parent-component',
template: `
`
})
export class ParentComponent {
collection: any[] = ['item1', 'item2', 'item3', 'item4'];
filteredCollection: any[];
filterText: string;
filterCollection() {
this.filteredCollection = this.collection.filter(item => item.includes(this.filterText));
}
}
现在,当您在文本框中输入筛选条件时,父组件将根据条件对集合进行筛选,并将筛选结果传递给子组件以显示。