问题描述
如何实现像 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上的“听"更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!