通过 Angular 模板传递回调函数时保留此上下文

Posted 2023-03-16

【中文标题】通过 Angular 模板传递回调函数时保留此上下文

【英文标题】：Preserving this context when passing a callback function via Angular template

【发布时间】：2021-11-27 23:13:14

【问题描述】：

我的组件定义了一个接收回调作为参数的方法

  sendDeleteRequest(btn: MatButton, cbk: any) 
    cbk()()
  

  f() 
    console.log(this.owner)
  

回调是从组件模板传递过来的

<button mat-raised-button (click)="sendDeleteRequest(deleteCredBtn, f)" color="warn" #deleteCredBtn="matButton">Delete</button>

但是f 函数会引发ERROR TypeError: this is undefined。

如何保留上下文？

我尝试了什么

将this 保存在f 函数内的self 变量中以打印self.owner 从f 返回一个 lambda 函数 从sendDeleteRequest 调用cbk 时使用bind(this)

他们都没有工作。

【参考方案1】：

有趣。我不知道 this 上下文在将函数作为参数从视图模板传递时被删除了。

但是，您可以直接在模板中使用this 传递对组件实例的引用，这将允许您执行类似于以下的操作：

  @Component() export class MyComp 
    testStr = "Value on componentContext";
    
    sendDeleteRequest(btn: MatButton, cbk: Function, componentContext: MyComp)
    
      cbk.bind(componentContext)();
    
    
    test() 
    
      console.log(this.testStr);
    

  

<button mat-raised-button (click)="sendDeleteRequest(deleteCredBtn, test, this)" color="warn" #deleteCredBtn="matButton">Delete</button>

感觉有点hacky，但它似乎按预期工作。