renderer2 set 属性中指定的角度访问函数答案

【问题标题】：Angular accessing function specified in renderer2 set propertyrenderer2 set 属性中指定的角度访问函数
【发布时间】：2022-01-11 01:05:26
【问题描述】：

我有一个使用renderer.setProperty 将表值替换为“a href”的指令。

附加到“a href”的是一个“click”属性，我不确定如何访问该功能：“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")
  }
}

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

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

如何使我的 onClickAccountLink 函数可用？

【问题讨论】：

标签： angular angular2-directives angular-renderer2

【解决方案1】：

我阅读了this problem，它解决了我的问题。

我添加了“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);
    });
  }

【讨论】：