Комбинация PanelMenuModule с ng-шаблоном или ng-контейнером

Question

Я пишу проект angular6 с primeng.

Мне нужно объединить тег primeng panelMenu с ng-шаблонами.Ниже приведены снимки для меню панели.

Без раскрытия меню панели.

С расширением меню панели.

Моя панель имеет 3 заголовка: 1. Студент 2. Отдел 3. Справка, и в каждом из них есть подменю.Каждый раз, когда я щелкаю по подменю, соответствующие ng-шаблоны должны загружаться рядом с Menu (в черном пространстве).

Это может быть достигнуто с помощью параметра routerLink в MenuItem и созданием каждого подменю в качестве отдельного компонента.Но я не хочу поступать таким образом.Я хочу загружать соответствующие 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 - логическая переменная.

Answer 1

После некоторых исследований и разработок шаблонов и панели управления Prime-NG я пришел к следующему решению.

Мы можем использовать команду вариант MenuItem из primengдля передачи некоторых интерактивных событий и обработки динамической загрузки шаблонов.

Коды класса компонента и шаблона пользовательского интерфейса изменены, как показано ниже, для работы.

Класс компонента

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>

Если кто-нибудь найдет лучшее решение и поделится здесь, будет заметно.

Спасибо.

Answer 2

Из документации здесь 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' }
        ]
      }
    ];