Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular4-p菜单无法在菜单栏上看到图标_Angular_Twitter Bootstrap 3_Menu_Primeng_Angular6 - Fatal编程技术网

Angular4-p菜单无法在菜单栏上看到图标

Angular4-p菜单无法在菜单栏上看到图标,angular,twitter-bootstrap-3,menu,primeng,angular6,Angular,Twitter Bootstrap 3,Menu,Primeng,Angular6,目前在我的项目中,我正在使用带有侧菜单功能的Angular 4.1。 右边我有汉堡包菜单图标。单击它,我想显示带有图标的标签 下面是我的代码 汉堡菜单.template.html 在ngOnInit中,我调用了以下方法: this.menuItem() 功能实现: private menuItem(): void { this.items = [ { label: this.translate.instant('burgermainmenu.mycompany

目前在我的项目中,我正在使用带有侧菜单功能的Angular 4.1。 右边我有汉堡包菜单图标。单击它,我想显示带有图标的标签

下面是我的代码

  • 汉堡菜单.template.html
  • 在ngOnInit中,我调用了以下方法:

    this.menuItem()

    功能实现:

    private menuItem(): void {
        this.items = [
          {
            label: this.translate.instant('burgermainmenu.mycompanyrestaurantlabel'), icon: 'home-icon', command: (event) => {
              this.arrowClick('home');
            }
          },
          {
            label: this.translate.instant('burgermainmenu.allcompanyrestaurantlabel'), icon: 'all-cafeteria-icon',
            routerLink: ['../../cafe/cafeteria-list', 'list-view', { id: this.currentLocation }],
            command: (event) => {
              this.arrowClick('');
            }
          }]
    
  • 应用程序模块.ts
  • 从'@angular/platform browser/animations'导入{BrowserAnimationsModule}

    在@NgModule中,下面的内容已经导入

    问题-根据上述实施,我无法在侧菜单中看到要标记的图标


    任何帮助都是值得的

    我找到了解决办法。我提到下面的步骤,以便将来如果有人遇到同样的问题,他可以找到解决方案

  • 安装字体真棒

    npm安装--保存字体awesome角度字体awesome

  • 将字体awesome css文件添加到angular.json inside style元素中

    “样式”:[
    “/assets/css/styles.scss”,
    “./node_modules/bootstrap/dist/css/bootstrap.min.css”,
    “./node_modules/primeng/resources/primeng.min.css”,
    “./node\u modules/font-awesome/css/font-awesome.css”,
    “./节点\模块/力矩”
    ]

  • 现在您可以执行下面的命令

    npm安装

  • 要在localhost上托管应用程序,请运行以下命令

    npm启动

  • public items: MenuItem[];
    
    private menuItem(): void {
        this.items = [
          {
            label: this.translate.instant('burgermainmenu.mycompanyrestaurantlabel'), icon: 'home-icon', command: (event) => {
              this.arrowClick('home');
            }
          },
          {
            label: this.translate.instant('burgermainmenu.allcompanyrestaurantlabel'), icon: 'all-cafeteria-icon',
            routerLink: ['../../cafe/cafeteria-list', 'list-view', { id: this.currentLocation }],
            command: (event) => {
              this.arrowClick('');
            }
          }]
    
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forRoot(ROUTES, { useHash: true }),
        BrowserAnimationsModule,
        SharedModule,
        TranslateModule.forRoot({
          loader: { provide: TranslateLoader, useClass: CustomLoader }
        }),
        AsyncLocalStorageModule,
        LazyLoadImageModule
      ]