Я начинаю работать с Nebular и теперь как бы застрял.

App.module.ts :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';

import {
  NbThemeModule,
  NbLayoutModule,
  NbContextMenuModule,
  NbActionsModule,
  NbMenuModule,
  NbSidebarModule,
  NbSidebarService,
  NbCardModule
} from '@nebular/theme';

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    NbThemeModule.forRoot(),
    NbLayoutModule,
    NbContextMenuModule,
    NbActionsModule,
    NbMenuModule,
    NbSidebarModule,
    NbCardModule,
  ],
  providers: [NbSidebarService],
  bootstrap: [AppComponent],
})

export class AppModule { }


Я создал в своем AppComponent простой пользовательский интерфейс:

    <nb-card>
      <nb-menu [items]="items">
      </nb-menu>
    </nb-card></nb-sidebar><nb-layout-column>
    <nb-layout-header fixed>
      <nb-actions class="left">
        <nb-action class="profile" nbContextMenuPlacement="bottom">Profile</nb-action>
        <nb-action>Settings</nb-action>
      </nb-actions>
    </nb-layout-header>
    <router-outlet></router-outlet>
    </nb-layout-column>
    </nb-layout>

В теге я вставляю переменную items

import { Component } from '@angular/core';
import { NbMenuItem } from '@nebular/theme';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

})
export class AppComponent {
  static apiUrl: any = 'xxx';
  title = 'TrainingFrontend';
  items: NbMenuItem[] = [
    {
      title: 'Profile',
      icon: 'person-outline',
    },
    {
      title: 'Change Password',
      icon: 'lock-outline',
    },
    {
      title: 'Privacy Policy',
      icon: { icon: 'checkmark-outline', pack: 'eva' },
    },
    {
      title: 'Logout',
      icon: 'unlock-outline',
    },
  ];
}

Когда я вставляю переменную элемента, Angular вылетает. Без переменной работает нормально.

ERROR NullInjectorError: R3InjectorError(AppModule)[NbMenuInternalService -> NbMenuInternalService -> NbMenuInternalService]: 
  NullInjectorError: No provider for NbMenuInternalService!
    Angular 9
        get
        get
        get
        get
        get
        get
        lookupTokenUsingModuleInjector
        getOrCreateInjectable
        directiveInject
    NbMenuComponent_Factory index.js:11914
    Angular 5
        getNodeInjectable
        instantiateAllDirectives
        createDirectivesInstances
        elementStart
        element
    AppComponent_Template app.component.html:5
    Angular 20
        executeTemplate
        renderView
        renderComponent
        renderChildComponents
        renderView
        create
        bootstrap
        _moduleDoBootstrap
        _moduleDoBootstrap
        bootstrapModuleFactory
        invoke
        onInvoke
        invoke
        run
        scheduleResolveOrReject
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        drainMicroTaskQueue

Я ничего не мог найти об этом, и я действительно в отчаянии. Заранее спасибо.

0
Nicolai Harms 2 Мар 2021 в 16:04

1 ответ

Лучший ответ

Вы должны добавить NbMenuInternalService к провайдеру в модуле App:

  providers: [NbSidebarService, NbMenuInternalService],

Для получения дополнительных сведений: вы можете перейти по этой ссылке.

Также внесите это изменение для NbMenuModule:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    NbThemeModule.forRoot(),
    NbLayoutModule,
    NbContextMenuModule,
    NbActionsModule,
    NbMenuModule.forRoot(), // change this line
    NbSidebarModule,
    NbCardModule,
  ],
1
Apoorva Chikara 2 Мар 2021 в 13:13