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

尝试以下操作

应用程序组件.ts

import { 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>

安全管道.ts

import { 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();

  }

}