在对话框上应用菜单

Question

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

<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。如何克服它？

Answer 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 菜单，您有一个来自容器 div (p-menu div) 的结构。问题是 opacity=0 被设置为 child div。所以，我们把这个 div 作为一个 0 子项（唯一的子项 p-menu div 有，所以这里没有幻数），然后将不透明度设置为 0.

在对话框上应用菜单

Primeng Menu on dialog

primeng

angular