对话框上的 Primeng 菜单答案

【问题标题】：Primeng Menu on dialog对话框上的 Primeng 菜单
【发布时间】：2020-07-31 18:07:16
【问题描述】：

我正在努力解决这个问题。如果对话框上没有弹出菜单，然后关闭对话框，当你重新打开它时，菜单不会出现

<p-dialog modal="true" appendTo="body" [contentStyle]="{width: '800px', height: '650px' }" [(visible)]="projectManager">
  <div style="margin-bottom: 20px;
  text-align: center;">
    <img src="./assets/images/qubix32.png" style="display: inline">
    <span style="font-size: 20px">       Welcome </span>
  </div>
  <div class="p-grid" >
    <div class="p-col-fixed" style="width:150px">
      <span>work</span>
      <p-menu [model]="main"></p-menu>
    </div>

    <div class="p-col">

      <h3 style="margin-bottom: 10px"> Recent projects </h3>
     <div style="margin-bottom: 4px"  *ngFor="let program of this.programs">
       <a href="#" [ngStyle]="{'font-size':'12px'}"[title]="program.value" ><br/><u>{{program.label}}</u></a>
       <span [ngStyle]="{'font-size':'10px', 'font-color': 'gray'}"> <br/>  {{program.value}}</span>
     </div>
    </div>

    <div class="p-col"  class="p-col-fixed" style="width:140px">
      <span>work</span>
      <p-menu [ngStyle]="{'float': 'right'}" [model]="info"></p-menu>
    </div>
  </div>
  <div>
    <h3 style="margin-top: 20px"> Your Repo </h3>
    <p-tree [contextMenu]="cm"  [value]="files1" selectionMode="multiple" [draggableNodes]="true" [droppableNodes]="true" draggableScope="self" droppableScope="self" [filter]="true" [style]="{'margin-top':'10px', 'width': '100%', 'height': '200px','max-height':'268px','overflow':'auto'}"></p-tree>
  </div>
  <p-contextMenu #cm appendTo="body" [model]="contextMenu"></p-contextMenu>
</p-dialog>

不存在来自代码的其他操作。分析生成的样式，我意识到某些东西将菜单的不透明度设置为 0。如何克服？

【问题讨论】：

标签： angular primeng

【解决方案1】：

因此，克服它的方法（粗鲁的方法）是在对话框获得显示事件时手动将不透明度设置为元素。这里我添加了 onShow 事件处理程序。

<p-dialog (onShow)="reinit($event)" modal="true" appendTo="body" [contentStyle]="{width: '800px', height: '650px' }" [(visible)]="projectManager">

在重新初始化函数中：

 reinit($event: any) {
   let element = document.getElementById("menu-dialog");
   let menu = element.children[0];
   menu.setAttribute("style","opacity:1!important");
   console.log(menu);
 }

对于primeng menu，你有一个来自容器div（p-menu div）的结构。问题是 opacity=0 设置为子 div。所以，我们把这个 div 作为一个 0 孩子（唯一的孩子 p-menu div 有，所以这里没有幻数），只是将不透明度设置为 0。

【讨论】：