Angular 2 innerHTML忽略表单标签

Question

我正在为 Angular 2 构建一个模态，因为没有像 angular 1.x 这样的原生模态 :( 而且我取得了很好的进展。我创建了一个显示和隐藏并具有输入的模态组件对于正文模板。唯一不起作用的是出于某种原因，表单元素正在从呈现的 html 中删除，我不确定为什么。

我有我的父组件，它在它的模板中包含这个:

<cmg-modal #modal [body]='modalBody'></cmg-modal>

我在这里添加模态框，为其命名并为正文内容传递一个变量。

在父组件代码中，我们将模态主体设置为 HTML 模板。

private modalBody: any = require('../modal/templates/createProject.html');

在该模板 (createProject.html) 中，我有以下代码:

<div class='create-project-modal'>
  <h2>Create a new project</h2>
  <form>
    <input type='text' name='projectName' placeholder='Enter a project name'>
  </form>
  <h3>hello world</h3>
  <p>this is annoying</p>
</div>

最后，在模态模板文件中，我将 body 的值绑定(bind)到 body 元素的 innerHTML。

<section class='body' [innerHTML]='body'></section>

然而，当我加载模式并检查元素时，我只有以下 HTML:

<section class='body' ng-reflect-inner-h-t-m-l='<div class="create-project-modal">&#10;  <h2>Create a new project</h2>&#10;  &#10;    &#10;  &#10;  <h3>hello world</h3>&#10;  <p>this is annoying</p>&#10;</div>&#10;'>
  <div class='create-project-modal'>
    <h2>Create a new project</h2>
    <h3>hello world</h3>
    <p>this is annoying</p>
  </div>
</section>

表格哪里去了!？!

Answer 1

您可以使用 DomSanitizer将您的 HTML 标记为受信任的，这样 innerHTML 就不会删除任何内容。

另见 In RC.1 some styles can't be added using binding syntax