在发生PASTE事件后将组件重新加载（重新渲染）为可编辑的内容

Question

我想向您寻求有关在Angular中重新渲染应用程序组件的帮助。

用例：

我有Angular指令，该指令将边框设置为图像（没关系，它只是将一些CSS设置为元素...）。例如：<img src="something.png" appMyBorderDirective>。

我还有myPasteDirective，该元素将元素设置为可编辑的。示例：<div myPasteDirective></div>

myPasteDirective还可处理PASTE事件（如果识别出粘贴了图像，则会在元素中手动插入<img src="data:tmpUrlOfThePastedImage" appMyBorderDirective>。

问题：

当我手动将任何图像插入DIV中时（因此，我组件的模板.html如下所示：<div myPasteDirective><img src="someImage.png" appMyBorderDirective></div>），该指令将正常显示img，因此该图像在指令实现中已设置了所有CSS。但是：当我使用CTRL + V将图像粘贴到contenteditable div中时，图像将以{<img src="data:tmpUrlOfThePastedImage" appMyBorderDirective>出现在DIV中）插入DIV中，但是指令appMyBorderDirective无法呈现。这是有道理的，但我不知道如何强制Angular进行重新渲染。

我需要的：

在粘贴事件之后，我需要“重新加载” /“重新渲染”组件，以便呈现新粘贴的图像中的指令。

我尝试过的事情：

当粘贴事件在<div myPasteDirective></div>中发生时，我从myPasteDirective发出输出（它看起来像这样：<div myPasteDirective (onPaste)="reloadComponent()"></div>），因此我可以在组件中调用方法reloadComponent（），以尝试调用多次重载方法..我尝试了

• ApplicationRef.tick（）
• ChangeDetectorRef.detectChanges（）
• this.ngOnInit（）

什么都没有。