對角2模板

Question

綁定HTML代碼串我有HTML代碼的組件變量象下面這樣：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: `Hi <div [innerHTML]="name"></div>`, 
    styleUrls: ['./app.component.css'], 
    styles: [` 
    .highlight { 
     background-color: yellow; 
    } 
    `], 
}) 
export class AppComponent { 
name :string ="dude ! <input type='text'/>"; 
} 

它顯示等的輸出「嗨夥計！」但是沒有文本框。如何使用組件變量顯示文本框綁定？

Answer 1

此代碼不安全。所以，渲染輸入元素默認是不允許的。您需要使用DomSanitizer允許它：

constructor(sanitizer: DomSanitizer) { 
    this.name = sanitizer.bypassSecurityTrustHtml(this.name); 
} 

見，說明這個plunker sample。

Answer 2

在模板中，嘗試：

<div [innerHTML]="name"> 
    <input type='text'/> 
</div> 

，並從名稱中刪除變量輸入的標籤。如果你想要數據綁定，請考慮在輸入標籤上使用ngModel。