angular2 检测 ng-content 的变化

Question

有没有办法检测 ng-content 的变化？

 @Component({
    selector: 'example',
    template: `<ng-content></ng-content>`
})
export class Example {}

@Component({
    selector: 'test',
    template: `
        <example>
            <div *ngFor="let el of elements">{{el}}</div>
        </example>`
})
export class Test {
    elements = [1, 2, 3];

    ngOnInit() {
        setInterval(() => this.elements[0] += 10, 3000);
    }
}

当我的 ng-content 发生变化时，我想在 Example 类中获得一些信息。

这是 笨蛋

原文由 Stwosch 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单的解决方案是使用 cdkObserveContent 指令。首先，您必须添加到拥有组件 ObserversModule 的模块的导入中

import {ObserversModule} from '@angular/cdk/observers';

@NgModule({
  imports: [
    /* ...other modules you use... */
    ObserversModule
  ],

/* ... */
})
export class MyModule { }

然后在您的组件模板中：

 <div (cdkObserveContent)="onContentChange($event)">
  <ng-content></ng-content>
</div>

每次内部内容以某种方式发生变化时都会触发该事件，并且传递给函数的值是一个数组，其中包含有关更改内容的所有详细信息。变化的数据的值可以在 target.data 中找到。

在你的 component.ts 中：

 onContentChange(changes: MutationRecord[]) {
   // logs everything that changed
   changes.forEach(change => console.log(change.target.data));
}

此外，您可以将其用作服务，为您提供 Observable<MutationRecord[]>

原文由 Dylanbob211 发布，翻译遵循 CC BY-SA 4.0 许可协议