Угловое свойство innerHTML не работает при попытке отрисовки кнопки - PullRequest
Новая
       15

Угловое свойство innerHTML не работает при попытке отрисовки кнопки

1 голос
/ 24 мая 2019

Я создал угловое приложение. Здесь я хочу внедрить некоторый контент, используя свойство [innerHTML], как показано ниже 

export class AppComponent  {
  name = 'Angular';
  public bar = 'bars';
  foo = `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`;
}

Я использовал это в html-файле, как показано ниже 

<div [innerHTML]="foo"></div>

Но я просто возвращаю только элемент div.Кнопка управления не обрабатывается.

Я создал образец стека для вашей справки.пожалуйста, предоставьте любую идею, как это сделать

образец - https://stackblitz.com/edit/angular-ena2xj?file=src/app/app.component.ts

Справочник - Угловое связывание HTML

Ответы [ 2 ]

3 голосов
/ 24 мая 2019

вы должны использовать DomSanitizer 

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
        constructor(private sanitized: DomSanitizer) {}

   name = 'Angular';
  public bar = 'bars';
  foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`);
}
1 голос
/ 24 мая 2019

Вы можете изменить его на @ ViewChild,

Измените свой ts файл следующим образом, 

export class AppComponent  {
  @ViewChild('someVar') el:ElementRef;
  name = 'Angular';
  public bar = 'bar';
  ngAfterViewInit() {
  this.el.nativeElement.innerHTML = `<div>`+this.bar+`
  </div><button type="button" onclick="alert('Hello world!')">Click Me!</button>`;
}
}

Рабочий Stackblitz https://stackblitz.com/edit/angular-vnk9ft

...