如何渲染存储在字符串类型变量中的动态角度代码

Question

[“你好，你好吗

0" 类="按钮容器">

        <button class="action-button" (click)="onButtonClick(button)">
          {{ button.name }}

        </button>

      </div>

    </div>"]`this is the string`

我已将上面提到的作为字符串存储在变量中，但是当我尝试渲染它时，它将所有代码显示为文本。

我希望动态按钮应该显示并工作。 我尝试过 DOM Sanitizer，但通过它我得到了这个输出。 [你好，你好吗{{button.name}}]button.name是按钮，但它没有正常工作。

Answer 1

您可以使用以下代码以角度渲染 html 字符串。

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

您需要确保仅在其中渲染硬编码字符串，因为这是一个安全风险，如果您渲染用户输入等动态内容，则可以执行恶意代码。

另请注意：角度事件在该渲染代码内不起作用，因为它是在角度上下文之外渲染的。

如果你想让角度事件起作用。您需要将字符串转换为数据对象，并使用该数据对象动态地使用

ngFor

、

ngSwitch

和

ngIf

渲染 html