我的应用程序中有两个组件——object-list和search-filter。此外，我还有一个fetch-service和getObjects(page, filter)方法。我想实现一个场景，其中object-list通过getObjects方法获取所有数据，然后search-filter将对getObjects应用一些过滤器，object-list将自动更新。这里有一些代码：
提取服务
objects: Observable<any>;
getObjects(page: number, filter): void {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
const offset = (page - 1)* this.pageSize;
let url = this.objectsBaseUrl;
//apply filter
if (filter) {
url = `${url}?filter=${JSON.stringify(filter)}`
}
this.objects = this.http.get(url)
.map((response: Response) => {
return response.json() || {}
})
.catch(this.handleError);
}
ObjectListComponent
constructor(private fetch: FetchService) {}
ngOnInit(): void {
this.fetch.getObjects(this.initialPage);
this.objects = this.fetch.objects; // I need an Observable object to use with async pipe with *ngFor
}
getPage(page: number) {
this.fetch.getObjects(page); //here this.objects variable probably should be update because this methods replaces this.fetch.objects
}
搜索过滤器
constructor(private fetch: FetchService) {}
apply() {
//some filter calculations
this.fetch.getObjects(1, this.filter);
}
我不使用subscribe到objects，因为我把它放在*ngFor的异步管道中。但就我而言，异步管道内部使用subscribe。问题是，当ngOnInit激发时，列表只更新一次。怎么了？
SearchFilter组件不应负责获取数据。
我会这样做：
1)创建3个组件
-
父组件，也称为"智能组件"，用于处理侦听筛选器更改和使用
FetchService获取数据的所有逻辑。父组件的模板中显示了两个子组件： -
第一个子级：
SearchFilterComponent是一个"哑组件"(或表示组件)。它唯一的工作是在每次筛选器更改时发出一个@Output事件，将最新的筛选器值传递给其父级 -
二胎：
ObjectListComponent也是一个"哑组件"。它唯一的工作是显示其父组件通过@Input属性提供的对象列表
2)实施以下工作流程
- 当过滤器在
SearchFilterComponent中更改时，发出一个传递最新过滤器值的@Output事件，例如this.filtersChanged.emit(filters) - 在父组件中，使用
<search-filter (filtersChanged)="getObjects($event)">侦听筛选器更改。getObjects(filters)方法将在每次过滤器更改时重新获取对象；它应该将提取的对象存储在父组件的一个属性中，我们称之为results - 然后，父组件通过名为
objects:<object-list [objects]="results">的@Input属性将results传递给其子组件ObjectListComponent。每次输入更改时，对象列表都应自动刷新
希望我的解释能有意义。如果你不熟悉angular.io网站上的@Input和@Output，请阅读它们。我没有时间创建Plunkr，所以如果有什么不清楚的地方，请发布问题。