我可以使用 RxJS而不是hook來(lái)捕獲標(biāo)簽click中的事件。我還使用 Angular 清理了 HTML 。markfromEventaddEventListenerAfterViewInitAfterContentCheckedDomSanitizer
嘗試以下操作
應(yīng)用程序組件.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();
? }
}
應(yīng)用程序組件.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>單個(gè)標(biāo)簽中有多個(gè)標(biāo)簽innerHTML
在這種情況下，您可以使用querySelectorAll()該函數(shù)來(lái)代替querySelector()。此外，由于會(huì)有多個(gè)元素，您可以使用Array#mapwithfromEvent和 RxJSmap運(yùn)算符來(lái)獲取各自的ids。
請(qǐng)注意，我們創(chuàng)建了多個(gè)訂閱流。因此標(biāo)簽的數(shù)量越多mark，流的數(shù)量就越多。當(dāng)組件關(guān)閉時(shí)（例如takeUntil使用），您需要關(guān)閉它。有更好的方法來(lái)處理多個(gè)訂閱（例如使用combineLatest），但它們都有自己的優(yōu)點(diǎn)和缺點(diǎn)。我將把它們留給你來(lái)解決。
控制器
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();
? }
}
