angular cdk Observers里面的功能可以让我们能监听到ng-content内容的变化。更加详细的内容可以参考官网https://material.angular.io/cdk/observers/overview
和cdk里面其他的功能模块一样如果想使用Observers里面的功能需要先provider ObserversModule
import {ObserversModule} from '@angular/cdk/observers';
一 ContentObserver
ContentObserver是cdk Observers模块里面提供的一个service。用来监听某个视图元素内容的变化。ContentObserver里面的方法也比较简单。ContentObserver里面的方法如下。
export declare class ContentObserver implements OnDestroy {
/**
* 监听视图元素内容的变化,参数--Element
*/
observe(element: Element): Observable<MutationRecord[]>;
/**
* 监听视图元素内容的变化,参数--ElementRef
*/
observe(element: ElementRef<Element>): Observable<MutationRecord[]>;
}
1.1 ContentObserver的使用
针对ContentObserver Service的使用,我们举一个非常简单的例子。每秒去变化一下内容。
import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {ContentObserver} from '@angular/cdk/observers';
@Component({
selector: 'app-cdk-observers',
template: `
<div #observerSource>
{{content}}
</div>
`
})
export class CdkObserversComponent implements AfterViewInit {
@ViewChild('observerSource')
observerSource: ElementRef;
content = 1;
/**
* ContentObserver service
*/
constructor(private observer: ContentObserver) {
/**
* 启动一个定时任务,去改变内容
*/
setInterval(() => {
this.content++;
}, 3000);
}
ngAfterViewInit(): void {
// ContentObserver 监听视图元素内容的变化,只是简单的打印
this.observer.observe(this.observerSource.nativeElement)
.subscribe((event: MutationRecord[]) => console.log(event));
}
}
二 CdkObserveContent
CdkObserveContent是cdk Observers里面提供的指令。可以监听添加了CdkObserveContent指令视图元素的内容的变化。
Selector: [cdkObserveContent]
Exported as: cdkObserveContent
2.1 CdkObserveContent指令属性
属性 | 类型 | 解释 |
---|---|---|
debounce: number | @Input() | 有的时候视图元素内容的变化是很频繁的,用来设置多长时间监听变化的事件 |
disabled: any | @Input('cdkObserveContentDisabled') | 动态设置是否监听变化事件 |
event: EventEmitter<MutationRecord[]> | @Output('cdkObserveContent') | 内容变化回调事件 |
2.2 CdkObserveContent指令的使用
import {Component} from '@angular/core';
@Component({
selector: 'app-cdk-observers',
template: `
<div cdkObserveContent (cdkObserveContent)="onContentChange($event)">
{{content}}
</div>
`
})
export class CdkObserversComponent {
content = 1;
constructor() {
setInterval(() => {
this.content++;
}, 3000);
}
onContentChange(event: MutationRecord[]) {
console.log(event);
}
}
关于cdk Observers里面的内容咱们就讲这么一些,上面涉及到的实例连接 https://github.com/tuacy/angular-cdk-study。关于angular里面内容变化这块的内容,我倒是想到了另一个东西NgZone。用来应对在模板中咱们动态绑定了一个值。但是这个值频繁的在变化。如果不做其他的处理我们知道Angular会跟踪变化,并且把变化的内容实时的展示在页面上。这样肯定是会有性能的损耗的。这个时候NgZone就派上用场了。NgZone里面提供了两个函数:runOutsideAngular() 使你的上下文不会触发Angular跟踪变化、run()方法让Angular重新跟踪变化。有兴趣的可以去看下NgZone的使用。