innerHTML - 在（点击）事件中传递值

Question

如何向innerHTML中已设置的点击事件传入参数？

成分

html = "Lorem ipsum dolor sit amet, <mark (click)='hello('my name is what')'>consectetur adipiscing elit</mark>"

constructor(private changeDetectorRef: ChangeDetectorRef) {}

ngAfterContentChecked() {

  this.changeDetectorRef.detectChanges();

   if (this.showcaseContentText.nativeElement.querySelector('mark')) {

     this.showcaseContentText.nativeElement

      .querySelector('mark')

      .addEventListener('click', this.hello.bind(this));

   }

}

hello(test: string) {

  console.log(test);

}

模板

<div class="text-md-left text-muted mb-lg-6" [innerHTML]="html" style="font-size: 15px"></div>

Answer 1

我可以使用 RxJS而不是hook来捕获标签click中的事件。我还使用 Angular 清理了 HTML 。markfromEventaddEventListenerAfterViewInitAfterContentCheckedDomSanitizer尝试以下操作应用程序组件.tsimport { fromEvent, Subject } from "rxjs";import { takeUntil } from "rxjs/operators";...export class AppComponent implements AfterViewInit, OnDestroy {  @ViewChild("showcaseContentText") showcaseContentText: ElementRef<any>;  html =    "Lorem ipsum dolor sit amet, <mark (click)='hello('my name is what')'>consectetur adipiscing elit</mark>";  closed$ = new Subject<any>();  constructor(private cdr: ChangeDetectorRef) {}  ngAfterViewInit() {    this.cdr.detectChanges();    fromEvent(      this.showcaseContentText.nativeElement.querySelector("mark"),      "click"    )      .pipe(takeUntil(this.closed$))      .subscribe(e => console.log(e));  }  ngOnDestroy() {    this.closed$.next();  }}应用程序组件.html<div #showcaseContentText class="text-md-left text-muted mb-lg-6" [innerHTML]="html | safe" style="font-size: 15px"></div>安全管道.tsimport { Pipe, PipeTransform } from "@angular/core";import { DomSanitizer, SafeHtml } from "@angular/platform-browser";@Pipe({  name: "safe",  pure: true})export class SafePipe implements PipeTransform {  constructor(protected sanitizer: DomSanitizer) {}  public transform(value: any): SafeHtml {    return this.sanitizer.bypassSecurityTrustHtml(value);  }}更新：<mark>单个标签中有多个标签innerHTML在这种情况下，您可以使用querySelectorAll()该函数来代替querySelector()。此外，由于会有多个元素，您可以使用Array#mapwithfromEvent和 RxJSmap运算符来获取各自的ids。请注意，我们创建了多个订阅流。因此标签的数量越多mark，流的数量就越多。当组件关闭时（例如takeUntil使用），您需要关闭它。有更好的方法来处理多个订阅（例如使用combineLatest），但它们都有自己的优点和缺点。我将把它们留给你来解决。控制器export class AppComponent implements AfterViewInit, OnDestroy {  @ViewChild("showcaseContentText") showcaseContentText: ElementRef<any>;  html =    "Lorem ipsum dolor sit amet, <mark id='mark1' (click)='hello('my name is what')'>consectetur adipiscing elit</mark>. Lorem ipsum <mark id='mark2' (click)='hello('my name is two')'>dolor sit amet</mark>, consectetur adipiscing elit";  closed$ = new Subject<any>();  constructor(private cdr: ChangeDetectorRef) {}  ngAfterViewInit() {    this.cdr.detectChanges();    const obs$ = Array.from(      this.showcaseContentText.nativeElement.querySelectorAll("mark")    ).map((el: HTMLElement) => fromEvent(el, "click").pipe(map(_ => el["id"])));    obs$.forEach(obs =>      obs.pipe(takeUntil(this.closed$)).subscribe({        next: id => {          console.log(id);        }      })    );  }  ngOnDestroy() {    this.closed$.next();  }}