TypeScript core.IterableDiffer類代碼示例

 // ngDoCheck is called every time the component is checked, which is quite a lot as it's checked on every event
 ngDoCheck(): void {
   const changes = this.differ.diff(this.comments);
   if (changes) {
     console.log('%cIterableDiffers', 'color:orange', changes);
     changes.forEachAddedItem(r =>
       console.log('%cAdded', 'color:orange', r.item)
     );
     changes.forEachRemovedItem(r =>
       console.log('%cRemoved', 'color:orange', r.item)
     );
   }
 }

	/**
	 * Update the state of the layers.
	 * We use an iterable differ to synchronize the map layers with the state of the bound layers array.
	 * This is important because it allows us to react to changes to the contents of the array as well
	 * as changes to the actual array instance.
	 */
	private updateLayers() {

		const map = this.leafletDirective.getMap();

		if (null != map && null != this.layersDiffer) {

			const changes = this.layersDiffer.diff(this.layersValue);
			if (null != changes) {

				// Run outside angular to ensure layer events don't trigger change detection
				this.zone.runOutsideAngular(() => {

					changes.forEachRemovedItem((c) => {
						map.removeLayer(c.item);
					});
					changes.forEachAddedItem((c) => {
						map.addLayer(c.item);
					});

				});

			}

		}

	}

 /** Clear the children dataNodes. */
 protected _clear(): void {
   const outlet = this._getNodeOutlet();
   if (outlet) {
     outlet.viewContainer.clear();
     this._dataDiffer.diff([]);
   }
 }

 /** Add children dataNodes to the NodeOutlet */
 protected updateChildrenNodes(): void {
   if (this.nodeOutlet.length && this._children) {
     const viewContainer = this.nodeOutlet.first.viewContainer;
     this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
   } else {
     // Reset the data differ if there's no children nodes displayed
     this._dataDiffer.diff([]);
   }
 }

 ngOnChanges(changes: SimpleChanges): void {
   // Create a new columns differ if one does not yet exist. Initialize it based on initial value
   // of the columns property.
   const columns = changes['columns'].currentValue;
   if (!this._columnsDiffer && columns) {
     this._columnsDiffer = this._differs.find(columns).create();
     this._columnsDiffer.diff(columns);
   }
 }

 ngOnChanges(changes: SimpleChanges): void {
   // Create a new columns differ if one does not yet exist. Initialize it based on initial value
   // of the columns property or an empty array if none is provided.
   if (!this._columnsDiffer) {
     const columns = (changes['columns'] && changes['columns'].currentValue) || [];
     this._columnsDiffer = this._differs.find(columns).create();
     this._columnsDiffer.diff(columns);
   }
 }

	ngDoCheck() {

		console.log('do check called');

		if (this.differ) {
			const changes = this.differ.diff(this.items);
			console.dir(changes);
		}

	}

 ngDoCheck() {
     if (this._differ) {
         const changes = this._differ.diff(this._rawItems);
         if (changes) {
             // TODO: not very efficient right now,
             // but premature optimization is the root of all evil.
             this._items.all = this._rawItems;
         }
     }
 }

  ngDoCheck(): void {
    if (!this.differ) {
      return;
    }

    const changes = this.differ.diff(this.easyListForOf);

    if (changes) {
      this.applyChanges(changes);
    }
  }

 /** Add children dataNodes to the NodeOutlet */
 protected updateChildrenNodes(children?: T[]): void {
   const outlet = this._getNodeOutlet();
   if (children) {
     this._children = children;
   }
   if (outlet && this._children) {
     const viewContainer = outlet.viewContainer;
     this._tree.renderNodeChanges(this._children, this._dataDiffer, viewContainer, this._data);
   } else {
     // Reset the data differ if there's no children nodes displayed
     this._dataDiffer.diff([]);
   }
 }