在Angular中,父组件可以通过使用ng-content
来监听子组件的内容,并作出相应的响应。下面给出一个包含代码示例的解决方法:
首先,在父组件的HTML模板中,使用ng-content
来引入子组件的内容:
然后,在父组件的TypeScript文件中,使用@ContentChildren
装饰器来获取子组件的引用,并监听其变化:
import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`
})
export class ParentComponent implements AfterContentInit {
@ContentChildren(ChildComponent) children: QueryList;
ngAfterContentInit() {
this.children.changes.subscribe(() => {
// 子组件内容发生变化时的逻辑
console.log('子组件内容发生变化');
});
}
}
最后,在父组件中,可以通过订阅children.changes
来监听子组件内容的变化,并在回调函数中执行相应的逻辑。
这样,当子组件的内容发生变化时,父组件就能够监听到并做出相应的响应。