В настоящее время я пытаюсь интегрировать компонент Jquery с моим приложением Angular. Компонент представляет собой компонент домашней страницы, который организует виджеты. Моя конечная цель - использовать это и обрабатывать события (изменить размер виджета, удалить виджет) в коде Angular, но я не знаю, как определить, на какой карте произошло событие в контексте Angular.
Часть Jquery просто использует селектор класса
const cards = homepage.element.find('.card, .widget');
и затем запускает обработчики событий:
homepage.element.triggerHandler('resizecard', [card, homepage.state]);
Обратите внимание на две вещи:
- событие запускается на компоненте домашней страницы, а не на отдельных виджетах, и
- элемент Jquery для целевой карты передается вместе с событием.
Оболочка angular для виджета имеет вид как ниже.
@Component({
selector: 'div[soho-widget]', // tslint:disable-line
template: `<ng-content></ng-content>`,
})
export class SohoWidgetComponent {
@HostBinding('class') get classList(): string {
и в компоненте домашней страницы есть источники событий, обертывающие такие события, как:
.on('resizecard', (e: JQuery.TriggeredEvent, card: JQuery, metadata: object) => this.onResizeCard(card, metadata))
В моем приложении Angular каждый виджет - это собственный компонент, расширяющий абстрактный компонент класс , но Я не могу на всю жизнь понять, как определить, на каком виджете происходит событие в контексте Angular.