为什么 jqxMenu 显示不正确？

如何解决为什么 jqxMenu 显示不正确？

我正在为一个 angular 项目开发自己的模块。我正在尝试使用 jqxMenu 制作菜单，但是当我运行 ng serve 时，它​​并没有像它应该的那样显示。我已经将 jqxmenucomponent 导入到我的组件中，如下所示

import { Component,OnInit,ViewChild,ViewChildren,ViewRef } from '@angular/core';
import { jqxMenuComponent } from 'jqwidgets-ng/jqxmenu';
import { DiagramPaperComponent} from '../diagram-paper/diagram-paper.component'

@Component({
  selector: 'app-statemachines-menu',templateUrl: './statemachines-menu.component.html',styleUrls: ['./statemachines-menu.component.scss']
})

export class StatemachinesMenuComponent implements OnInit {
    @ViewChild(DiagramPaperComponent) public readonly paper: DiagramPaperComponent;
    @ViewChild('jqxMenu') jqxMenu: jqxMenuComponent;
    
    public ngOnInit() {
       
    }
    
    public ngAfterViewInit() {
        this.centerItems();
    }

    public centerItems(): void {
        let firstItem = this.jqxMenu.elementRef.nativeElement.firstElementChild.children[0].firstElementChild;
        let width = 0;
        let borderOffset = 2;
        let allLiElements = this.jqxMenu.elementRef.nativeElement.firstElementChild.children[0].children;
        for (let i = 0; i < allLiElements.length; i++) {
            let currentLi = allLiElements[i];
            width += currentLi.offsetWidth + borderOffset;
        }
        
        let menuWidth = this.jqxMenu.elementRef.nativeElement.firstElementChild.offsetWidth;
        let calculatedOffset = (menuWidth / 2) - (width / 2);
        firstItem.style.margin = '0 0 0 ' + (calculatedOffset).toString() + 'px';
    }

    public onResize(event: any): void {
        let innerWidth = event.target.innerWidth;
        this.centerItems();
    }
}

我也将 jqxMenuModule 导入到我的模块中，如下所示

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { jqxMenuModule } from 'jqwidgets-ng/jqxmenu';
import { DiagramPaperComponent } from './diagram-paper/diagram-paper.component';
import { StatemachinesMenuComponent } from './statemachines-menu/statemachines-menu.component';

@NgModule({
  declarations: [ DiagramPaperComponent,StatemachinesMenuComponent],imports: [CommonModule,jqxMenuModule]

})

export class StatemachinesModule { }

这是HTML中菜单的内容

<div #content (window:resize)="onResize($event)">
    <jqxMenu #jqxMenu [width]="'100%'" [height]="30">
      <ul>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/module.png' />
          <span>Add New State</span>
        </li>
        <li>
          
          <span>Inputs</span>
        </li>
        <li>
          
          <span>Outputs</span>
        </li>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/save.png' />
          <span>Save Diagram</span>
        </li>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/load.png' />
          <span>Load Diagram</span>
        </li>
        <li>
          <img style='float: left; margin-right: 5px;' src='assets/log_gate_icons/sourcecode.png' />
          <span>Generate Code</span>
        </li>
      </ul>
    </jqxMenu>
  </div>

运行 ng serve 后得到的结果如下，基本上它只是一个带有图像的文本列表。图片加载正确。

jqxmenu appereance

解决方法

已按照 JQ 说明将引导程序和 J 查询脚本添加到您的 angular.json 文件？

"styles": [
     "./src/styles.css","node_modules/jquery-ui/themes/base/theme.css","node_modules/bootstrap/dist/css/bootstrap.min.css","node_modules/jqwidgets-ng/jqwidgets/styles/jqx.base.css","node_modules/jqwidgets-ng/jqwidgets/styles/jqx.bootstrap.css"
...
]

和

"scripts": [
    "node_modules/jquery/dist/jquery.js","node_modules/jquery-ui/ui/widgets/datepicker.js","node_modules/popper.js/dist/umd/popper.js","node_modules/bootstrap/dist/js/bootstrap.js",...

这就是我让菜单正常工作的方法。