Angular 2 innerHTML игнорирование форм тегов

Question

Я создаю модальный для Angular 2, так как нет родного, такого как угловой 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> 

Наконец, в файле модальности шаблона я связать значение тела к 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

Из соображений безопасности внутреннийHTML выдает формы и элементы ввода. Это должно помешать веб-разработчикам сделать их сайты уязвимыми для XSS и других хаков. Если вы посмотрите на консоли, должно быть WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

Вы можете посмотреть в динамическую загрузку компонентов, чтобы достичь своей конечной цели, но угловые классов люди используют, чтобы сделать это, главным образом DynamicComponentLoader и ComponentResolver, устарели.

Answer 2

Вы можете использовать DomSanitizer, чтобы пометить ваш HTML как доверенный, так что innerHTML ничего не сделает.

Смотрите также In RC.1 some styles can't be added using binding syntax