如何使用innerHtml中的变量调用function？

Question

I've found example of calling function in innerHtml https://stackblitz.com/edit/angular-innerhtml-examples , but I don't know what to do, if function needs variable, which acceptable only from controller:

 constructor(private elementRef: ElementRef, private sanitizer: DomSanitizer) {
    const currentString = "green";
    this.content = this.sanitizer.bypassSecurityTrustHtml(
      '<button type="button" id="submitButton" (click)="openWindow()">Submit</buttn>'
    );
  }
  openWindow(string) {
    alert(string);
  }

Answer 1

Try to add your variable as a param to addEventListener('click',someEventHander.bind(this, param1)) .

Check this stackblitz example: https://stackblitz.com/edit/angular-innerhtml-examples-hdw7xs?file=src%2Fapp%2Fapp.component.ts

You can also refer to: https://www.codegrepper.com/code-examples/javascript/addeventlistener+with+arguments+in+angular+8

Also it is better/clean way to use bypassSecurityTrustHtml into angular pipe then call it from [innerHtml] . I adapted the above stackblitz example to use this way.

And finally, please use console.log() instead of alert() when debugging an application. for reason and more details: Why is console.log() considered better than alert()?