这个问题通常发生在使用 innerHTML 属性动态生成 HTML 代码时。在 Angular 中，如果使用 {{ }} 插值表达式在 DOM 上设置 innerHTML，那么最终渲染的内容将会是混淆的。

要解决这个问题，可以使用 Angular 提供的 DomSanitizer 服务。DomSanitizer 服务可以过滤掉 HTML 中的不安全内容并返回安全的 HTML 内容。在使用 innerHTML 属性时，可以在组件中注入 DomSanitizer 服务并使用它来过滤 innerHTML 中的内容，例如：

import { Component, OnInit } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({ selector: 'app-my-component', template: '

unsafeHtml = ''; safeHtml: SafeHtml;

constructor(private sanitizer: DomSanitizer) { }

ngOnInit() { this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.unsafeHtml); } }

在这个示例中，组件的模板中使用了 [innerHTML] 属性来设置动态生成的 HTML 内容。通过注入 DomSanitizer 服务，我们可以通过调用 bypassSecurityTrustHtml 方法来获取安全的 HTML 内容。最后，将安全的 HTML 内容赋值给组件的 safeHtml 变量，以便在模板中绑定 [innerHTML] 属性。这样可以确保动态生成的 HTML 内容被正确渲染并且不会导致 XSS 攻击。