角度-@ViewChild上的“听"更改 [英] Angular - 'Listen' on @ViewChild changes

问题描述

如何实现像 onElChanged 这样的函数，以便每次< div #plot id ="plot-container"<//div> 更改了?

How can be a function like onElChanged be implemented, so that this functions gets executed each time properties of <div #plot id="plot-container"></div> changed?

component.html

component.html

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

component.ts

component.ts

@ViewChild('plot') el: ElementRef;

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

推荐答案

虽然不是使用@ViewChild装饰器的解决方案，但您可以使用非常相似的 @ViewChildren 装饰器来订阅更改，尽管您观察到的特定主题是非列表式的奇异元素.

Though not a solution that uses @ViewChild decorator, you can use the very similar @ViewChildren decorator to subscribe to changes despite your particular observed subject being a non-list-like singular element.

您可以使用 first (或 last ) QueryList 成员获取 ElementRef 值-忽略大多数 QueryList 接口的列表特定部分的内容-这是我在下面使用的快速而肮脏的方法.但是，建议您迭代处理一个长度为1的单数元素，以遵循典型的 @ViewChildren 范例并创建更通用的方法和服务.

You can use the first (or last) QueryList member to obtain the ElementRef value - ignoring most of the list-specific parts of the QueryList interface - which is the quick and dirty approach I use below. However, it is probably recommended to handle a singular element iteratively as a list of length 1 to stick with the typical @ViewChildren paradigm and create more generically useful methods and services.

@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 演示对元素的更新)...

Or an example from a listener that exists outside a component (with special consideration for illustrating an update to the element via 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的其他版本(包括最新版本)进行验证.

I've used my suggested approach in Angular version ^5.2.1 and have not verified for other versions of Angular including the latest.

这篇关于角度-@ViewChild上的“听"更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！