Доступ к родительскому компоненту из обратного вызова команды MenuItem

Question

Я использую PrimeNG 5.2 в приложении Angular 5.

Я пытаюсь отобразить список продуктов, когда пользователь нажимает на элемент меню.

Для этого у меня есть PanelMenu где первый уровень товаров содержит основные категории товаров, а второй уровень содержит подкатегории. На втором уровне каждая подкатегория имеет click event, в котором мне нужно поставить какую-то логику (выбрать товары по категориям, показать таблицу и т. д.).

Вот рабочий код, который у меня есть:

(...)
// Populate second level items with subcategories
categories.forEach(cat =>
{
    if(cat['parent'] == category['id']) // 'category' is the first level category
    {
        subcats.push({
            label: cat['description'],
            id: cat['id'],
            command: this.subCatClick
        });
    }
});
items.push({label: category['description'], items: subcats});  // Items of the menu

subCatClick(event)
{
    //this.logger.log(`clicked on cat ${event.item.label}`, false);
    //this.getProductByCategoryId(event.item.id);

    // 'this' refers to the item here !
    console.log(this);
}

Как отмечено в комментарии, this относится к MenuItem (здесь подкатегория) и, следовательно, не содержит ссылки на функции / сервисы, которые я хочу вызвать (прокомментировано в приведенном выше примере).

Эти функции / услуги являются членами component который содержит PanelMenu, Как я могу получить к ним доступ из click event?

Спасибо за помощь.

Answer 1

Перепишите строку, где вы передаете ссылку на функцию:

command: this.subCatClick

Синтаксис функции стрелка, которая будет связывать "это" с "это" вызываемого:

command: (event) => this.subCatClick(event)

В качестве альтернативы вы можете использовать ключевое слово .bind в javascript:

command: this.subCatClick.bind(this)