在Angular中,@ContentChildren装饰器用于获取父组件中通过
要解决这个问题,你可以使用Angular的ChangeDetectorRef服务手动检测更改。以下是一个解决方案的示例代码:
父组件:
import { Component, ContentChildren, QueryList, TemplateRef, AfterContentInit, ChangeDetectorRef } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-parent',
template: `
`,
})
export class ParentComponent implements AfterContentInit {
@ContentChildren(ChildComponent) children: QueryList;
template: TemplateRef;
constructor(private cdr: ChangeDetectorRef) {}
ngAfterContentInit() {
this.children.changes.subscribe(() => {
this.cdr.detectChanges();
});
}
// 切换模板的方法
toggleTemplate() {
this.template = this.template ? null : this.templateRef;
}
}
子组件:
import { Component, Input } from '@angular/core';
import { TemplateRef } from '@angular/core';
@Component({
selector: 'app-child',
template: `
`,
})
export class ChildComponent {
@Input() template: TemplateRef;
}
在父组件中,我们使用AfterContentInit生命周期钩子来订阅子组件的更改。每次子组件的QueryList发生变化时,我们手动调用ChangeDetectorRef的detectChanges方法进行检测。
另外,在切换模板的方法中,我们可以通过赋值null或非null值来切换模板。
希望这个解决方案能帮助到你!