Angular 2 innerHTML忽略表单标签 [英] Angular 2 innerHTML ignoring form tags

问题描述

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

I am building out a modal for Angular 2 since there isn't a native one like angular 1.x :( and I'm making good progress. I've created a modal component that shows and hides and has an input for the body template. The only thing that isn't working is for some reason the form elements are being removed from the rendered html and I'm not sure why.

我有我的父组件，该组件在其模板中包括以下内容:

I have my parent component which includes this in it's template:

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

在这里，我要添加模态，为其命名并传递一个用于体内含量的变量.

Here I am adding the modal, giving it a name and passing a variable for the body content.

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

Inside the parent components code we set the modal body to an HTML template.

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

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

Inside that template (createProject.html) I have the following code:

<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.

Finally in the modals template file I bind the value of the body to the innerHTML of the body element.

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

但是，当我加载模态并检查元素时，我只有以下HTML:

However when I load the modal and inspect the element I only have the following 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>

表格去哪里了??！

推荐答案

出于安全原因，innerHTML会删除表单和输入元素.这是为了防止Web开发人员使自己的网站容易受到XSS和其他黑客的攻击.如果您在控制台上查看，应该有警告:清理HTML剥离的某些内容(请参阅http://g.co/ng/security#xss).

For security reasons, innerHTML strips out form and input elements. This is to prevent web developers from making their sites vulnerable to XSS and other hacks. If you look on the console, there should be WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

您可以研究动态组件加载以实现最终目标，但是人们一直使用Angular类来实现此目的，主要是

You can look into dynamic component loading to achieve your end goal, but the Angular classes people have been using to do this, mainly DynamicComponentLoader and ComponentResolver, have been deprecated.

这篇关于Angular 2 innerHTML忽略表单标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！