Angular 访问 renderer2 集合中指定的函数 属性

Question

我有一个使用 .

将 table 值替换为“a href”的指令

附加到“a href”的是“点击”属性，我不确定如何访问该功能：“onClickAccountLink($event)”或向其添加编程功能。

我试过在同一指令中添加相同的函数名称，但它似乎没有使用同一文件中指定的相同函数。

import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[AccountLink]'
})
export class AccountLink implements OnInit {

  constructor(public el: ElementRef, public renderer: Renderer2) {}

  ngOnInit() {}
  ngAfterViewInit() {
    let iban = this.el.nativeElement;
    if(iban) {
      this.format(iban);
    }
  }

  format(val) {
    this.renderer.setProperty(val, 'innerHTML', `<a href="javascript: void(0)" (click)="onClickAccountLink($event)">${val.innerHTML}</a>`);
    console.log(typeof(val.innerHTML)) //string
    

  }

  onClickAccountLink(event: any) {
    console.log(event)
    event.stopPropagation();
    event.preventDefault();
    console.log("function called")
  }
}

该指令附加到 table 行中的值。

<td AccountLink>{{iban}}</td>

如何使我的 onClickAccountLink 功能可用？

Answer 1

我读了 它解决了我的问题。

我添加了“render.listen”来检查点击事件

  format(ibanValue) {
    this.renderer.setProperty(ibanValue, 'innerHTML', `<a href="javascript: void(0)">${ibanValue.innerHTML}</a>`);
    this.renderer.listen(ibanValue ,'click', ()=> {
      this.onClickAccountLink(ibanValue);
    });
  }