У меня есть приложение, которое размещает несколько экземпляров одного и того же компонента на одной странице. Я хочу прикрепить отдельное всплывающее контекстное меню к каждому из них. Но проблема в том, что я не знаю, как создать уникальный идентификатор для них.
Текущий HTML для компонента:
<p-contextMenu [model]='menuItems' [target]='contextMenuContainer'></p-contextMenu>
<div #contextMenuContainer></div>
Проблема в том, что с до 100 экземпляров этого компонента на странице не позволяет отображать всплывающее меню. Я не хочу, чтобы меню было глобальным, мне нужно, чтобы оно указывало c на экземпляр компонента, на котором произошел щелчок.
Какой правильный способ сделать это? Я предполагаю, что мне нужен уникальный идентификатор HTMLDivElement для каждого компонента, но я понятия не имею, как я могу программно сгенерировать замену для #contextMenuContainer для использования.