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 的值绑定到 body 元素的内部HTML。

<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

出于安全原因，innerHTML 去除了表单和输入元素。这是为了防止 Web 开发人员使他们的网站容易受到 XSS 和其他黑客攻击。如果您查看控制台，应该有 WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

您可以研究动态组件加载以实现您的最终目标，但是 Angular 类人们一直在使用的方法，主要是 DynamicComponentLoader and ComponentResolver，已被弃用。

Answer 2

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

另见

Angular 2 innerHTML 忽略表单标签

Angular 2 innerHTML ignoring form tags

modal-dialog

innerhtml

angular