событие click не работает во внутренней строке HTML 6

Question

Я работаю над созданием динамического шаблона с использованием углового 6. У меня есть API, который возвращает строки, как показано ниже:

    <button type="button" (click)="openAlert()">click me</button>

и html

    <div [innerHtml]="myTemplate | safeHtml">
      </div>

функция ниже:

    openAlert() {
        alert('hello');
      }

Answer 1

Вы не можете привязать угловые события непосредственно к innerHTML.

Тем не менее, если вам нужно присоединить прослушиватели событий, вам нужно сделать это после загрузки html-контента.

После того, как контентустановите в переменную, ngAfterViewChecked Угловое событие жизненного цикла будет запущено. Здесь необходимо подключить требуемые прослушиватели событий.

Оформить рабочий пример ниже.

component.html

<button (click)="addTemplate()">Get Template</button>
<div [innerHTML]="myTemplate | safeHtml"></div>

component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  myTemplate  = '';

  constructor(private elementRef:ElementRef){

  }
  openAlert() {
    alert('hello');
  }
  addTemplate(){
     this.myTemplate  = '<button type="button" id="my-button" (click)="openAlert()">click mee</buttn>';
  }
  ngAfterViewChecked (){
    if(this.elementRef.nativeElement.querySelector('#my-button')){
      this.elementRef.nativeElement.querySelector('#my-button').addEventListener('click', this.openAlert.bind(this));
    }
  } 
}

safe-html.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
  transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }

}

Answer 2

это тоже должно работать:

component.html

<div #template></div>

component.ts

@ViewChild('template') myTemplate: ElementRef;

addTemplate(){
   this.myTemplate.nativeElement.innerHTML = '<button type="button">click me</button>';
   this.myTemplate.nativeElement.addEventListener('click', this.openAlert);
}

Answer 3

В основном это не будет работать. Когда вы пишете код на Angular, он равен transpiled через веб-пакет и преобразуется в javascript, который выполняется в браузере.

Однако теперь вы вводите Angular code динамически, а не build, вводя его. Обнаружение события (click) не будет работать изначально, и функция openAlert также не входит в глобальную область, в которую оно внедряется. Вам нужно будет рассмотреть другой подход и генерировать контент, используя <ng-template> на основе ответа от API.