Angular 訪問在 renderer2 設置屬性中指定的 function

Question

我有一個使用renderer.setProperty用“a href”替換表值的指令。

附加到“a href”的是一個“click”屬性，我不確定如何訪問 function：“onClickAccountLink($event)”或向其添加編程 function。

我嘗試在同一指令中添加相同的 function 名稱，但它似乎沒有使用在同一文件中指定的相同 function。

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")
  }
}

該指令附加到表格行中的值。

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

如何使我的 onClickAccountLink function 可用？

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);
    });
  }