时间戳

首页 > 解决方案 > PanelMenuModule 与 ng-template 或 ng-container 的组合

angular - PanelMenuModule 与 ng-template 或 ng-container 的组合

问题描述

我正在用primeng写一个angular6项目。

我需要将primeng的panelMenu标签与ng-templates结合起来。以下是面板菜单的快照。

无需展开面板菜单。

无扩展面板菜单

随着扩展面板菜单。 带扩展的面板菜单

我的面板有 3 个标题 1. 学生 2. 部门 3. 帮助，每个标题都包含子菜单。每当我单击子菜单的相应 ng-templates 时，必须在 Menu 旁边加载（在黑色空间中）。

这可以通过使用 MenuItem 的 routerLink 选项并将每个子菜单作为单独的组件来实现。但我不想那样做。每当单击子菜单时，我都想加载相应的 ng 模板。

请提出一种方法，或提出一些示例。

下面是代码片段。

组件类

export class ViewOrderDetailsComponent implements OnInit {

  private viewDisplayItems: MenuItem[];
  isStudent: boolean = true;

  constructor() {
    this.viewDisplayItems = [
      {
        label: 'student', items: [
          { label: 'addStudent' }
        ]
      },
      {
        label: 'department',
        items: [
          { label: 'addDepartment' },
          { label: 'deleteDepartment' }
        ]
      },
      {
        label: 'help',
        items: [
          { label: 'searchStudent' },
          { label: 'searchDepartment' }
        ]
      }
    ];
  }

  ngOnInit() {
  }
}

HTML 模板

<p-panelMenu [model]="viewDisplayItems" [style]="{'width':'200px'}">
    <ng-container *ngIf="isStudent; then studentMenu; else departmentMenu">
    </ng-container>
</p-panelMenu>

<ng-template #studentMenu>
    <h2>Welcome to Student Menu</h2>
</ng-template>
<ng-template #departmentMenu>
    <h2>Welcome to Department Menu</h2>
</ng-template>

isStudent 是一个布尔变量。

标签： angularprimeng

解决方案

从这里的文档http://primefaces.org/primeng/#/panelmenu看起来没有像其他 PrimeNg 模块那样的模板选项。

但是，另一种选择是将另一个项目添加到项目中。使用MenuItem http://primefaces.org/primeng/#/menumodel上的文档

此时，您可以使用 CSS 定位项目以使其具有更理想的外观。

this.viewDisplayItems = [
      {
        label: 'student', 
        items: [
          { label: 'Welcome to the Student Menu', separator: true },
          { label: 'addStudent' }
        ]
      },
      {
        label: 'department',
        items: [
          { label: 'Welcome to the Department Menu', separator: true },
          { label: 'addDepartment' },
          { label: 'deleteDepartment' }
        ]
      },
      {
        label: 'help',
        items: [
          { label: 'Welcome to the Help Menu', separator: true },
          { label: 'searchStudent' },
          { label: 'searchDepartment' }
        ]
      }
    ];

推荐阅读