javascript - angular2检测ng含量的变化

有没有办法检测ng含量的变化？

@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类中获得一些信息。

这是plunker

最佳答案

最简单的解决方案是使用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[]>的服务