点击事件在从 typescript 动态生成的 HTML 中不起作用

Question

如果我的代码有任何错误，请找到我的代码并帮助我。

Controller.ts

生成动态 HTML 代码：

    Maintitle = Maintitle + " " + "<a href='javascript:void(0);' id='code-links' (click)='clickLinks();'>" + item.code[0] + "</a>";



      ngAfterViewInit() {
           if (this.elementRef.nativeElement.querySelector('#code-links')) {
                this.elementRef.nativeElement.querySelector('#codelinks').addEventListener('click', this.clickLinks.bind(this));
                }
            }

Pipe：

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser';
    @Pipe({
        name: 'safeHtml'
    })
    export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
        transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
         }

    }

HTML：

     <ul class="list-group list-group-code subTerms">
                <li class="result-success list-group-item strong" *ngFor="let item of xmlTabularContentFinal">
                  <span class="text-muted font-weight-normal"><span> <span [innerHTML]="item.title| safeHtml"></span></span></span>
                </li>
              </ul>

当我检查元素时，我可以看到该事件在 html 中绑定。 但是，当我单击链接时，不会触发该事件。

Answer 1

我认为您的情况有一个解决方案： 从服务器渲染动态代码

主要思想是你需要创建一个匿名组件和模块，然后在组件中渲染它。

Answer 2

因为 ngAfterViewInit() 方法在动态 html 加载之前执行，所以事件绑定不起作用。 现在我有一个明确的方法来在加载 html 内容后绑定事件。

问题已解决并使用点击事件。