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

Question

我正在测试一个添加到 div 的指令，这些指令正在实现 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 示例：

div 中使用 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