Как связать событие клика из TS в HTML динамически привязать тег, используя внутренний HTML в Angular 7?

Question

Я хочу привязать событие клика из ts к html динамически для привязки тега.
Файл Ts:

 this.RecommendedTests.Description = '<a (click)="showModel()">' 
  +this.RecommendedTests[i].Description + '</a>';

html:

 <div  [innerHTML]="RecommendedTests.Description"></div>

С помощью приведенного выше фрагмента кода:Я могу получить тег привязки, но событие click не срабатывает.Я думаю, что это связано с проблемой санации XSS, но не существует правильного решения, связанного с санацией XSS, и может быть найдено событие щелчка для привязки.

Возникла ли какая-либо проблема безопасности, если я достигну этого, используя DataSanitization для связывания таких вещей?

Может ли кто-нибудь помочь мне в этом?

Answer 1

Попробуйте так:

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

класс экспорта AppComponent {

  constructor(private sanitizer: DomSanitizer) {

    Window["AppComponent"] = this;
  }


  this.RecommendedTests.Description = this.sanitizer.bypassSecurityTrustHtml('<a onClick="Window.AppComponent.showModel()">'
      + this.RecommendedTests[i].Description  + '</a>')


  showModel() {
    alert("ok")
  }
}

Рабочая демонстрация

Answer 2

this.RecommendedTests.Description = <a (click)="showModel()"> +this.RecommendedTests[i].Description + </a>;Попробуйте это в своем коде, я думаю, что это работа