Question

我正在为Angular 2构建一个模态，因为没有像angular 1.x这样的原生模式:(我正在取得良好的进展。我创建了一个模态组件，显示和隐藏并有输入对于body模板。唯一不起作用的是由于某种原因表单元素被从渲染的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元素的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标记为受信任，因此<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> </style> </head> <body> The content of the document...... </body> </html>不会删除任何内容。

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

Answer 2

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

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

Angular 2 innerHTML忽略表单标签

2 个答案: