Angular cdk 学习之 Observers

       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的使用。