Angular 2 innerHTML忽略窗體標籤

我正在構建Angular 2的模式，因爲沒有像1.x這樣的原生窗口:(我正在取得不錯的進展，我創建了一個模態組件並隱藏並有一個body模板的輸入，唯一不起作用的是由於某種原因，表單元素被從呈現的html中刪除，我不知道爲什麼Angular 2 innerHTML忽略窗體標籤

我有我的父組件其中包括這在它的模板：

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

這裏我加入模式，給它一個名稱和傳遞變量爲主體內容

在父組件代碼中，我們將模態主體設置爲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元素的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>

哪兒形式去！？！

來源

2016-08-17 efarley

出於安全原因，innerHTML會去除表單和輸入元素。這是爲了防止網站開發者使他們的網站容易受到XSS和其他黑客攻擊。如果你看一下在控制檯上，應該有WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

你可以看看動態組件加載實現自己的最終目標，但角度階級人們一直在使用要做到這一點，主要是DynamicComponentLoader和ComponentResolver，已被棄用。

來源

2016-08-17 01:04:10 ABabin

您可以使用DomSanitizer將HTML標記爲可信，以便innerHTML不會剝離任何東西。

另請參閱In RC.1 some styles can't be added using binding syntax

來源

2016-08-17 10:51:59

在第一個鏈接中找不到頁面。 – kittycatbytes

@kittycatbytes謝謝你的提示！它被重新命名。我更新了我的答案。 –

Angular 2 innerHTML忽略窗體標籤

回答

相關問題