Javascript 角度：检测组件/指令中内容html的更改时间

我有一个从REST端点获取html并通过[innerHTML]将其绑定到div元素的指令。在呈现这个html之后，我想调用一个全局可用的函数来处理这个内容

因此，我尝试创建一个指令，该指令实现AfterView init并将其添加到我的div元素中：

@指令({
选择器：“[specialContent]”
})
导出类SpecialContentDirective实现AfterViewInit{
建造师(
私人el:ElementRef
) {}
ngAfterViewInit（）：void{
globalObject.applyTo(
this.el.nativeElement.querySelectorAll（“.target”）
);
}
}

这种方式可以工作，但只有在呈现上下文的当前组件是新加载的情况下才能工作。在没有卸载组件的情况下重新加载内容后，ngAfterViewInit显然不会再次触发

---

那么，正确的方法是什么呢

假设您有一个使用angular的http客户端执行api调用的服务。如果不是，你可能应该使用这种方法

调用Api并订阅响应，然后在响应完成后启动函数

订阅有三个阶段，

next、error、complete

this._service.api().subscribe(
    data => {
        this.data = data
    }, error => {
    //handle error
    }, () => {
    //Fire Function to mess with content
    }
)

---

在将数据分配给变量之前，您也可能会弄乱数据（这可能是更好的方法），尽管不确定您想要实现什么。

使用applyTo方法尝试实现什么还不太清楚

为什么不尝试将指令与输入一起使用

在HTML中

<div [specialContent]="entry.body">

---

您可以在组件或指令中使用名为“ngOnChanges”的生命周期钩子来检测更改。这是angular官方网站的示例代码

ngOnChanges(changes: SimpleChanges) {
  for (let propName in changes) {
    let chng = changes[propName];
    let cur  = JSON.stringify(chng.currentValue);
    let prev = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}

此处的SimpleChanges对象为您提供以前的值和新值

---

有关详细信息，您可以阅读官方文档

全局函数附加事件处理程序，因此不足以在更改html之前进行更改。使用您的解决方案a无法确保此时已呈现html。这也不起作用，因为问题仍然是，ngAfterViewInit只会触发一次。

ngOnChanges(changes: SimpleChanges) {
  for (let propName in changes) {
    let chng = changes[propName];
    let cur  = JSON.stringify(chng.currentValue);
    let prev = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}