Angular2 指令：如何检测 DOM 更改
Posted
技术标签:
【中文标题】Angular2 指令：如何检测 DOM 更改【英文标题】：Angular2 Directive: How to detect DOM changes 【发布时间】：2016-07-07 22:10:12 【问题描述】：我想将 Skrollr 实现为 Angular2 属性指令。
所以，格式可能是：
<body my-skrollr>
</body>
但是，为了实现这一点，我需要能够检测包含标记（在本例中为
）下的子元素中的 DOM 中的变化，以便我可以调用 skrollr.init()。刷新（）;并更新库以使用新内容。是否有一种我不知道的直接方法，或者我的处理方法不正确？
【问题讨论】：
好问题！！！ 【参考方案1】：Angular 没有为此目的提供内置的东西。您可以使用MutationObserver 来检测 DOM 更改。
@Directive(
selector: '[my-skrollr]',
...
)
class MyComponent
constructor(private elRef:ElementRef)
ngAfterViewInit()
this.observer = new MutationObserver(mutations =>
mutations.forEach(function(mutation)
console.log(mutation.type);
);
);
var config = attributes: true, childList: true, characterData: true ;
this.observer.observe(this.elRef.nativeElement, config);
【讨论】：
在 MutationObserver 构造函数中，它应该是“mutations”而不是“mutation” 谢谢你...有人能告诉我这会是什么相反的...即检测到没有任何变化吗？如果这是有道理的。大声笑我需要一些东西来关闭变量。 也许您可以检查在特定时间内没有发出任何突变事件？ @ChristianMatthew - 您肯定会简单地将状态设置为“false”，然后在发生变化时更改为 true？ 别忘了在ngOnDestroy()方法中调用this.observer.disconnect();以上是关于Angular2 指令：如何检测 DOM 更改的主要内容，如果未能解决你的问题，请参考以下文章
如何检测选择标签（Angular 2）上对 ngModel 的更改？