在 Angular 中,可以使用 QueryList
类型的 changes
属性来监听子组件的变化。但是,changes
属性只会在 QueryList
本身的一些改变上触发,而不会在子属性的改变上触发。
如果想要监听子属性的改变,可以使用 Observable
的 pipe
方法结合 map
操作符来实现。以下是一个示例代码:
import { Component, QueryList, ViewChildren, ElementRef, AfterViewInit } from '@angular/core';
import { Observable, fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-example',
template: `
{{ item }}
`
})
export class ExampleComponent implements AfterViewInit {
@ViewChildren('itemRef') itemRefs: QueryList;
ngAfterViewInit() {
this.itemRefs.changes.pipe(
map((queryList: QueryList) => queryList.toArray())
).subscribe((elements: ElementRef[]) => {
elements.forEach((element: ElementRef) => {
// 在这里可以监听子属性的改变
const observable: Observable = fromEvent(element.nativeElement, 'click');
observable.subscribe(() => {
console.log('子属性被点击了');
});
});
});
}
}
在上述代码中,通过 @ViewChildren
装饰器和 QueryList
类型的 itemRefs
属性来获取子组件的引用。在 ngAfterViewInit
生命周期钩子中,我们订阅了 itemRefs
的 changes
属性,并使用 map
操作符转换成一个数组。然后,我们遍历该数组,并为每个元素绑定了一个 click
事件的监听器。
这样,当子属性改变时,我们就可以监听到相应的事件,并执行相应的操作。