контекстное меню отображается неправильно, если на странице расположено несколько контекстных меню

#angular #primeng

Вопрос:

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

 <ul *ngFor="let intention of intentions; let i = index" [contextMenuSubject]="intention"
          [contextMenu]="intentionMenu"
          class="intension-tree">
 

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

     <ul *ngFor="let subIntension of subIntentions; let i = index" [contextMenuSubject]="subIntension"
        [contextMenu]="subintentionMenu"
        class="intension-tree">
 

теперь проблема в том, что, когда я щелкаю правой кнопкой мыши на поднаправлениях после щелчка правой кнопкой мыши на их родителе, они отображаются неправильно. проще говоря, если я открою это контекстное меню для дополнительных намерений после того, как открою контекстное меню для их (родительских) намерений. диалоговое окно отображается в диалоговом окне «Внимание».

Я добавляю скриншот проблемы ниже:

Обычная функциональность этого контекстного меню для родительских намерений

Проблемная функциональность контекстного меню для дочерних/вложенных намерений