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

这里是 plunker

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[]> 的服务