Angular - Служба ввода / передачи во внешнюю библиотеку

Question

Я работаю над пакетом NPM, чтобы обеспечить дополнительные функции для Material Datatable. Одной из таких функций является возможность передачи метода, который будет выполняться, когда пользователь щелкает указанную ячейку c.

Вот определение свойства:

Внутри внешней библиотеки

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

ОШИБКА TypeError: Невозможно прочитать свойство 'open' из неопределенного

Как я могу динамически предоставлять услуги любого типа внешней библиотеке? И как библиотека узнает, какой сервис использовать?

Или, может быть, я иду в неправильном направлении? Я попытался просто использовать источник событий и передать значение родительскому компоненту, но у него есть ограничения (он вызывается в каждой ячейке, дополнительные логики c, необходимые в родительском компоненте)

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