我有一个服务，它是在触发页面内容更改的事件之后调用的。该服务当前检查呈现页面上所有可查看的HTML中的关键字，然后创建指向使用这些关键字的词汇表的链接。页面内容来自许多来源，包括各种组件和外部文本数据。最初，这是通过查找所有元素，然后搜索和修改nativeElement.innerHTML来完成的，该HTML在触发完整页面刷新的事件上运行良好；在文本基于模板绑定的组件中，这些绑定在innerHTML更改后不会更新。我知道修改innerHTML很糟糕。。。
我尝试过使用根ViewContainerRef和ViewRef作为起点，但看不到访问所有页面内容的方法，包括多级子组件中的内容。此外，一些内容是通过路由器出口添加的。我希望动态修改模板或呈现的内容，同时允许组件在数据更改时仍然呈现内容，并允许我的服务再次进行后期处理。有些组件来自导入的库，或者直接接收它们的数据，因此修改组件源代码似乎不是最好的选择。
我发现，通过临时禁用、强制更改检测，然后在数据更改时启用组件，会导致组件被删除，并使用工作绑定重新创建。这不是一个最佳的解决方案，但作为一个初步的解决方案确实有效。我将尝试上述解决方案。
使用MutationObserver，您可以订阅文档中文本的更改，然后您可以以不破坏Angular的方式操作DOM，即不更改节点的innerHTML，而是使用新HTML插入一个同级，并隐藏(不删除(原始节点。
我已经写了一个stackblitz来证明这一点。
https://stackblitz.com/edit/angular-highlighter2
编辑我用所有代码创建了一个Angular库，请参阅https://www.npmjs.com/package/ngx-html-highlighter