Angular - 向外部库注入/传递服务

Question

我正在开发一个 NPM 包，以便为材料数据表提供额外的功能。其中一个功能是可以传递一个在用户单击特定单元格时将执行的方法。

这里是属性的定义：

内部外部库

click?: (element: any, property: string, event: MouseEvent) => unknown = null;

向它传递一个简单的方法，例如警报或 console.log 可以正常工作：

从使用库的项目中

{
    click: this.alert
}

...

alert(element: any, property: string, mouseEvent: MouseEvent) {
    alert(element[property]);
}

但是，如果我传递一个包含对服务的调用的方法，则库对该服务一无所知，并且该方法会崩溃：

{
    click: this.openDialog
}

...

openDialog(element: any, property: string, mouseEvent: MouseEvent) {
    this.matDialog.open(DialogComponent);
}

ERROR TypeError: Cannot read property 'open' of undefined

如何动态地向外部库提供任何类型的服务？图书馆如何知道使用哪种服务？

或者我走错了方向？我确实尝试过简单地使用事件发射器并将值传递给父组件，但它有局限性（在每个单元格上调用，父级中需要额外的逻辑）

Answer 1

这里有两个问题。一，它不知道类型，因为您没有参数化您的click 处理程序（查看Generics）。第二，您正在使用一个普通函数定义，该函数定义隐式绑定正在调用它的上下文。因此，如果您的外部库正在触发 click 并且 this.openDialog 与之相关联，则基本上该库将在其自身内部寻找 this.matDialog.open(DialogComponent);（它不会找到，因此未定义）。

我建议试试这个：

{
    click: this.openDialog.bind(this)
}

...

openDialog(element: any, property: string, mouseEvent: MouseEvent) {
    this.matDialog.open(DialogComponent);
}