Question

我想使用PrimeNG的菜单栏组件： https://www.primefaces.org/primeng/#/menubar

现在，当我只为模型添加一些项目时，我对它们不满意定位，所以我想为此目的使用Flexgrids： https://www.primefaces.org/primeng/#/flexgrid 我希望以此方式可以在利用网格的优点的同时轻松定位菜单项。

但是我没有按照我想要的方式工作。我尝试了以下方法： .html：

<p-menubar [styleClass]="styleClass"  [model]="navItems"></p-menubar>

.ts：

import {Component, OnInit} from '@angular/core';
import {MenubarModule} from 'primeng/menubar';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-navigator',
  templateUrl: './navigator.component.html',
  styleUrls: ['./navigator.component.scss']
})
export class NavigatorComponent implements OnInit {
  navItems: MenuItem[];
  styleClass: string;
  constructor() {
  }

  ngOnInit() {
    this.navItems = [
      {
        label: 'Menu',
        items: [
          {label: 'Start', icon: 'pi pi-fw pi-plus'},
          {label: 'Login'},
          {label: 'About'},
          {label: 'Contact'}
        ],
      styleClass:'p-col-2'
      },
      {label: 'Login', icon:'',styleClass:'p-col-2'}
    ];
    this.styleClass = 'p-grid p-justify-between';
  }

}

在浏览器中对其进行调试表明，styleClass只是将html class属性添加到html元素。但是，菜单栏会创建多个html元素，如下所示：

<p-menubar _ngcontent-mqs-c1="" ng-reflect-model="[object Object],[object Object"
           ng-reflect-style-class="p-grid p-justify-between">
  <div class="p-grid p-justify-between ui-menubar ui-widget ui-widget-content ui-corner-all"
       ng-reflect-klass="p-grid p-justify-between" ng-reflect-ng-class="[object Object]">
    <p-menubarsub root="root" ng-reflect-item="[object Object],[object Object" ng-reflect-root="root"
                  ng-reflect-auto-display="true" ng-reflect-auto-z-index="true" ng-reflect-base-z-index="0">
      <ul class="ui-menubar-root-list" ng-reflect-ng-class="[object Object]">
        <li class="ui-menuitem ui-corner-all ui-menu-parent" ng-reflect-ng-class="[object Object]">
          <a class="p-col-2 ui-menuitem-link ui-corner-all" ng-reflect-klass="p-col-2"
             ng-reflect-ng-class="[object Object]"
             href="#">
            <span class="ui-menuitem-text">Menu</span>
            <span class="ui-submenu-icon pi pi-fw pi-caret-down" ng-reflect-klass="ui-submenu-icon pi pi-fw"
                  ng-reflect-ng-class="[object Object]"></span>
          </a>
          <p-menubarsub class="ui-submenu" ng-reflect-item="[object Object]" ng-reflect-auto-display="true">
            <ul class="ui-widget-content ui-corner-all ui-submenu-list ui-shadow" ng-reflect-ng-class="[object Object]">
              <li class="ui-menuitem ui-corner-all" ng-reflect-ng-class="[object Object]">
                <a class="ui-menuitem-link ui-corner-all" ng-reflect-ng-class="[object Object]" href="#">
                <span class="ui-menuitem-icon pi pi-fw pi-plus" ng-reflect-klass="ui-menuitem-icon"
                      ng-reflect-ng-class="pi pi-fw pi-plus"></span>
                  <span class="ui-menuitem-text">Start</span><!--bindings={}-->
                </a>
              </li>
              <li class="ui-menuitem ui-corner-all" ng-reflect-ng-class="[object Object]">
                <a class="ui-menuitem-link ui-corner-all" ng-reflect-ng-class="[object Object]" href="#">
                  <span class="ui-menuitem-text">Login</span>
                </a>
              </li>
              <li class="ui-menuitem ui-corner-all" ng-reflect-ng-class="[object Object]">
                <a class="ui-menuitem-link ui-corner-all" ng-reflect-ng-class="[object Object]" href="#">
                  <span class="ui-menuitem-text">About</span>
                </a>
              </li>
              <li class="ui-menuitem ui-corner-all" ng-reflect-ng-class="[object Object]">
                <a class="ui-menuitem-link ui-corner-all" ng-reflect-ng-class="[object Object]" href="#">
                  <span class="ui-menuitem-text">Contact</span>
                </a>
              </li>
            </ul>
          </p-menubarsub>
        </li>
        <li class="ui-menuitem ui-corner-all" ng-reflect-ng-class="[object Object]">
          <a class="p-col-2 ui-menuitem-link ui-corner-all" ng-reflect-klass="p-col-2"
             ng-reflect-ng-class="[object Object]" href="#">
            <span class="ui-menuitem-text">Login</span>
          </a>
        </li>
      </ul>
    </p-menubarsub>
    <div class="ui-menubar-custom"></div>
  </div>
</p-menubar>

如果我正确理解flexgrid，则flexgrid会将其解释为嵌套网格，因此无法正确定位元素。由于这些其他元素在运行时呈现，因此我无法仅在html中对其进行更正。所以我的问题是：如何将FlexGrid与呈现新元素的此类组件正确使用？

在PrimeNG中为菜单栏使用网格

0 个答案: