Question

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

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

不展开面板菜单。

通过展开面板菜单。

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

这可以通过使用MenuItem的routerLink选项并将每个子菜单作为单独的组件来实现。但是我不想那样做。每当单击子菜单时，我都希望加载各自的ng-templates。

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

下面是代码段。

组件类

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

Answer 1

从这里的文档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' }
        ]
      }
    ];

Answer 2

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

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

对组件类和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>

如果有人找到更好的解决方案并在此处分享，将是可观的。

谢谢。

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

组件类

HTML模板

2 个答案:

组件类

HTML模板