PanelMenuModule 与 ng-template 或 ng-container 的组合答案

【问题标题】：Combination of PanelMenuModule with ng-template or ng-containerPanelMenuModule 与 ng-template 或 ng-container 的组合
【发布时间】：2019-04-12 11:12:42
【问题描述】：

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

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

无需展开面板菜单。

通过扩展面板菜单。

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

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

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

下面是代码sn-ps。

组件类

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 是一个布尔变量。

【问题讨论】：

标签： angular primeng

【解决方案1】：

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

但是，另一种选择是将另一个项目添加到项目中。使用MenuItemhttp://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' }
        ]
      }
    ];

【讨论】：

【解决方案2】：

在对prime-ng的模板和panelMenu进行了一些研发之后，我想出了以下解决方案。

我们可以使用primeng中MenuItem的command选项来传递一些可点击事件并处理模板的动态加载。

组件类和UI模板的代码修改如下。

组件类

export class ViewOrderDetailsComponent implements OnInit {

  private viewDisplayItems: MenuItem[];
  displayPageName: string;
  studentSubPageName: string;
  deptSubPageName: string;
  helpSubPageName: string;

  constructor() {
    this.viewDisplayItems = [
      {
        label: 'student', command: (onclick) => this.displayPageName = 'studentPage', 
        items: [
          { label: 'addStudent', command: (onclick) => this.studentSubPageName = 'addStudentPage' }
        ]
      },
      {
        label: 'department', command: (onclick) => this.displayPageName = 'departmentPage',
        items: [
          { label: 'addDepartment', command: (onclick) => this.deptSubPageName = 'addDepartmentPage'},
          { label: 'deleteDepartment', command: (onclick) => this.deptSubPageName = 'deleteDepartmentPage' }
        ]
      },
      {
        label: 'help', (onclick) => this.displayPageName = 'helpPage',
        items: [
          { label: 'searchStudent', command: (onclick) => this.helpSubPageName = 'searchStudentPage' },
          { label: 'searchDepartment', command: (onclick) => this.helpSubPageName = 'searchDepartmentPage' }
        ]
      }
    ];
  }

  ngOnInit() {
  }
}

HTML 模板

<div class="container-fluid">
    <div class="panel-div">
        <p-panelMenu [model]="viewDisplayItems">
        </p-panelMenu>
    </div>

    <div class="template-div">
        <ng-container *ngIf="displayPageName === 'studentPage'; then displayStudentPage; else checkDisplay1">
        </ng-container>
        <ng-template #checkDisplay1>
            <ng-container *ngIf="displayPageName === 'departmentPage'; then displayDepartmentPage; else checkDisplay2"/>
        </ng-template>

        <ng-template #checkDisplay2>
            <ng-container *ngIf="displayPageName === 'helpPage'; then displayHelpPage; else displayStudentPage"/>
        </ng-template>

        <ng-template #displayStudentPage>
            //code for Displaying students

            //As we have subdivisions in student, those are included as shown below
            // we have only one subdivision addStudent, So both in if and else we included the same template name
            <ng-container *ngIf="studentSubPageName === 'addStudentPage'; then addStudentPage; else addStudentPage">
            </ng-container>

            <ng-template #addStudentPage>
                //code for add Student
            </ng-template>

        </ng-template>

        <ng-template #displayDepartmentPage>
            //code for Displaying Departments

            //As we have subdivisions in department, those are included as shown below
            <ng-container *ngIf="deptSubPageName === 'addDepartmentPage'; then addDeptPage; else deleteDeptPage">
            </ng-container>

            <ng-template #addDepartmentPage>
                //code for add Departments
            </ng-template>

            <ng-template #deleteDeptPage>
                //code for deleting Departments
            </ng-template>
        </ng-template>

        <ng-template #displayHelpPage>
            //code for help Page

            //As we have subdivisions in help, those are included as shown below
            <ng-container *ngIf="helpSubPageName === 'searchStudentPage'; then studentSearchPage; else deptSearchPage">
            </ng-container>

            <ng-template #studentSearchPage>
                //code for searching Students
            </ng-template>

            <ng-template #deptSearchPage>
                //code for searching Departments
            </ng-template>
        </ng-template>
    </div>
</div>

如果有人找到更好的解决方案并在这里分享将不胜感激。

谢谢。

【讨论】：