Angular - @ViewChild 更改上的 'Listen'

Question

怎样才能像onElChanged这样的函数呢？被实现，这样这个函数就会在每次 <div #plot id="plot-container"></div> 的属性时执行变了？

component.html

<div #plot id="plot-container"></div>

component.ts

@ViewChild('plot') el: ElementRef;

onElChanged(){
  console.log(this.el.nativeElement.clientWidth);
}

Answer 1

虽然不是使用@ViewChild 装饰器的解决方案，您可以使用非常相似的@ViewChildren 装饰器来订阅更改，尽管您的特定观察主题是非列表- 像单一元素。

您可以使用first(或last)QueryList 成员来获取ElementRef 值——忽略大部分QueryList 接口(interface)的特定于列表的部分——这是我在下面使用的快速而肮脏的方法。 但是，可能建议将单个元素迭代处理为长度为 1 的列表，以坚持典型的 @ViewChildren 范例并创建更通用的有用方法和服务。

@ViewChildren('plot', {read: ElementRef}) el: QueryList<ElementRef>;

/**
 * Listen within this component
 */
private listenForPlotChanges() {
    this.el.changes.subscribe(
        (next: QueryList<ElementRef>) => {
            console.log('listenForPlotChanges next:', next);

            const plot = next.first.nativeElement;
            console.log('listentForPlotChanges plot:', plot);
         }
    );
}

或者来自存在于组件外部的监听器的示例(特别考虑通过 Renderer2 说明对元素的更新)...

import { ElementRef, Injectable, QueryList, Renderer2, RendererFactory2 } from '@angular/core';
import { ISubscription } from 'rxjs/Subscription';

/**
 * Listen and update with renderer as a service outside a component
 *
 * Usage:
 *  @ViewChildren('yourElement', {read: ElementRef}) el: QueryList<ElementRef>;
 *
 *  constructor(listener: ListenerService) {}
 *
 *  ngAfterViewInit() {
 *    this.listener.listenForPlotChanges(this.el);
 *  }
 */
@Injectable()
export class ListenerService {

private renderer: Renderer2;

constructor(rendererFactory: RendererFactory2) {
    this.renderer = rendererFactory.createRenderer(null, null);
}

listenForPlotChanges(elementQueryList: QueryList<ElementRef>): ISubscription {

    const resolveNext = (next) => {
            console.log('listenForPlotChanges next:', next);

            const plot = next.first.nativeElement;
            console.log('listentForPlotChanges plot:', plot);

            this.renderer.addClass(plot, 'twist');
    }

    return elementQueryList.changes.subscribe(
        (next: QueryList<ElementRef>) => {
            resolveNext(next);
        }
    }
}

我在 Angular 版本 ^5.2.1 中使用了我建议的方法，并且没有验证其他版本的 Angular，包括最新版本。