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

Question

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

  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
从 sendDeleteRequest

cbk

bind(this)

None 成功了。

Answer 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，但似乎按预期工作。

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

Preserving this context when passing a callback function via Angular template

callback

typeerror

typescript

angular