Angular 2 innerHTML 忽略表单标签

Posted 2023-05-07

【中文标题】Angular 2 innerHTML 忽略表单标签

【英文标题】：Angular 2 innerHTML ignoring form tags

【发布时间】：2016-12-23 12:03:09

【问题描述】：

我正在为 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>

最后在 modals 模板文件中，我将 body 的值绑定到 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>

表格去哪儿了！？！

【参考方案1】：

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

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

【讨论】：

在您的第一个链接上找不到页面。

@kittycatbytes 感谢您的提示！它被重新命名。我更新了我的答案。

【参考方案2】：

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

您可以查看动态组件加载以实现最终目标，但人们一直使用的 Angular 类，主要是 DynamicComponentLoader 和 ComponentResolver，已被弃用。