Проблема с отображением пользовательского контекстного меню

Question

По сути, у меня есть пользовательский компонент контекстного меню, и я хочу, чтобы он отображался, когда пользователь щелкает правой кнопкой мыши в определенном компоненте.

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

Я вижу, что событие запускается и обычное контекстное меню браузера не открывается из-за $event.preventDefault(), но мое контекстное меню не отображается, как ожидалось. Логическое значение должно быть установлено так, чтобы *ngIf в шаблоне оценивалось в true.

Прямые публичные c средства доступа к свойствам привели меня к тому же результату.

Вот стекаблица с реализацией

Answer 1

Проблема связана со способом разрешения имени this. В тот момент, когда вызывается ваш метод onContextMenu, this равен , а не разрешен для вашего класса AppContextMenuComponent (как вы могли ожидать). Чтобы увидеть это в действии, попробуйте вставить console.log(this) где-нибудь в этом методе. Поскольку this не разрешен, как вы могли ожидать, оператор присваивания this._isOpen = true не выполняет то, что вам нужно. Одним из быстрых решений этой проблемы является явное «связывание» значения, к которому должно разрешиться имя this, путем изменения настройки прослушивателя событий на:

.addEventListener('contextmenu', this.onContextMenu.bind(this));
//                                                 ^^^^^^^^^^^

Однако это может привести к проблемам, когда вы sh позже удалите прослушиватель этого события. Другие могут иметь лучшие решения для этого, но один из вариантов - использовать функцию стрелки вместо вашего метода (обратите внимание, что это основано на «предложении полей класса» , которое не является частью ES6).

Вот как выглядит это изменение:

private onContextMenu = ($event: MouseEvent): void => {
  //                  ^                            ^^
  // Body remains unchanged
};

Вот обновленный проект StackBlitz с изменением.

Answer 2

Для создания динамических c компонентов вам нужно поговорить с Angular https://angular.io/api/core/ComponentFactoryResolver. Немного поигрался с вашим Stackblitz https://stackblitz.com/edit/angular-wquakt

Кстати, я предлагаю использовать какой-то компонент, например https://material.angular.io/components/menu/overview