Angular 在标记中插入变量时崩溃

Question

我开始使用 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 中创建了一个简单的 UI:

    <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

我找不到任何相关信息，我真的很绝望。提前致谢。

Answer 1

您应该将 NbMenuInternalService 添加到 App 模块中的提供程序：

  providers: [NbSidebarService, NbMenuInternalService],

更多详情：您可以访问this link。

此外，对 NbMenuModule 进行此更改：

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    HttpClientModule,
    NbThemeModule.forRoot(),
    NbLayoutModule,
    NbContextMenuModule,
    NbActionsModule,
    NbMenuModule.forRoot(), // change this line
    NbSidebarModule,
    NbCardModule,
  ],

Angular 在标记中插入变量时崩溃

Angular crashes when variable is inserted in tag

javascript

angular

nebular