html входной текстовый тег, сохраненный в переменной, показывает его в угловом шаблоне

Question

У меня есть переменная, которой назначено текстовое поле HTML tag.i хочу отобразить как текстовое поле и получить доступ к ее значению

@Component({
  selector: 'app-field-add',
  templateUrl: './field-add.component.html',
  styleUrls: ['./field-add.component.css']
})
export class FieldAddComponent implements OnInit 
{
    public htmlTextBox ="<input type='text' [(ngModel)]='Field'  name='Field'>"
}

В шаблоне я поместил переменную

{{ htmlTextBox }}

Answer 1

Это способ отображения простого текста в вашем div, например,

Решение 1:

<div class="blog-post">{{testhtml}}</div>

Но это выведет текст,не HTML.

Для HTML вам необходимо привязать свойство

Решение 2:

<div class="blog-post" [innerHtml]="testhtml"></div>

Если оставить квадратные скобки,привязка к атрибуту, поэтому вам нужно будет снова интерполировать

Решение 3:

<div class="blog-post" innerHtml="{{testhtml}}"></div>

Привязка свойств (решение 2) является предпочтительным методом.

Answer 2

Угловая защита Блокирует динамический рендеринг HTML и других скриптов.Вам необходимо обойти их, используя DOM Sanitizer.

DO приведите ниже изменения в вашем коде:

// in your component.ts file

//import this 
import { DomSanitizer } from '@angular/platform-browser';


// in constructor create object 

constructor( 
...
private sanitizer: DomSanitizer

...
){

}

someMethod(){
 let htmlTextBox ="<input type='text' [(ngModel)]='Field'  name='Field'>"
 this.htmlData = this.sanitizer.bypassSecurityTrustHtml(htmlTextBox ); // this line bypasses angular security

}

и в HTML-файле;

<!-- In Your html file-->
    <div [innerHtml]="htmlData">
    </div>

Подробнее вы можете прочитать здесь: Угловая защита

Рабочий пример: Рабочий стекблиц

Answer 3

Попробуйте innerHtml:

<div [innerHtml]="htmlTextBox">
</div>