在 angular 中更新 innerHTML 代码时如何检测指令中的更改？

Question

我正在测试添加到 divs 的指令，它们正在实现 innerHTML，该指令通过单击 div（更改颜色）负责 highlingthing，但是我也想在组件更新 innerHTL 中的内容时进行更改，问题是 ngOnChanges 挂钩不知道任何更改。如何处理指令中的这种变化？什么事件更适合听取这种变化？需要主机监听器吗？

指令实施：

<div appHighlight [innerHTML]="htmlStr"></div>

关于指令的变化

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective implements OnInit, OnChanges {
  constructor(private el: ElementRef) {
     this.el.nativeElement.style.backgroundColor = 'yellow';
  }

  ngOnChanges(changes) {
   console.log('ngOnChanges ---->');
   console.log(changes, 'changes are not dectected');
   this.changeColor();
  }

  ngOnInit() {
     console.log('ngOnInit ---->');
  }

  @HostListener('click', ['$event.target'])
  onClick(btn) {
      this.changeColor();
  }

  changeColor() {
    this.el.nativeElement.style.backgroundColor = 'magenta';
  }
}

Stackblitz 示例：

directive in div that is using innerHTML

Answer 1

当 @input 发生变化时发生变化检测

这可能不是您想要的，但您可以做到。

在您突出显示的指令中添加一个输入：

@Input()
htmlString: string; // this is the named you bind to -> [htmlString]

然后在指令上也应用绑定

<div appHighlight [htmlString]="htmlStr" [innerHTML]="htmlStr"></div>

然后您将收到更新。当您稍后更新字符串时，它会在初始化时再次发生。

编辑曲目： https://stackblitz.com/edit/angular-ivy-xvr116?file=src%2Fapp%2Fdirectives%2Fhighlight.directive.ts

在 angular 中更新 innerHTML 代码时如何检测指令中的更改？

How to detect changes in a directive when innerHTML code is updated in angular?

javascript

directive

innerhtml

event-listener

angular