神经元抛出“ Nb-ac​​tion”不是一个已知元素:“错误?

时间:2018-09-08 07:49:57

标签: angular

我正在尝试在工作中实现星云,因此我正在遵循this星云教程进行锻炼。

我已经安装了星云状。它可以与<nb-layout> <nb-header>正常工作,但是当我使用<nb-actions><nb-menu>时,它会抛出以下错误

compiler.js:1021 Uncaught Error: Template parse errors:
'nb-action' is not a known element:
1. If 'nb-action' is an Angular component, then verify that it is part of this module.
2. If 'nb-action' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this 

我不知道这是什么问题。如何解决?

side.html

<nb-layout>      
    <nb-layout-header subheader>
        <nb-actions>
        <nb-action icon="nb-home"></nb-action>
        <nb-action icon="nb-search"></nb-action>
        <nb-action icon="nb-edit"></nb-action>
        </nb-actions>
    </nb-layout-header>

</nb-layout>

side.ts //组件

import {Component} from '@angular/core';


@Component({
    selector:"sidebar",
    templateUrl:"./side.html",
    styleUrls:["side.css"]
})
export class sideComponent{


}

sbar.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RouterModule,Routes } from '@angular/router';
import { NbSidebarModule, NbLayoutModule, NbSidebarService } from '@nebular/theme';
import {sideComponent} from "./sidecomp/side";

const routes: Routes = [{path:"sidebar",component:sideComponent}]


@NgModule({
  declarations:[
    sideComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes, { useHash: true }),    
    NbSidebarModule,
    NbLayoutModule

  ],
  providers:[NbSidebarService],
  exports:[sideComponent]
})
export class SbarModule { }

3 个答案:

答案 0 :(得分:2)

确保已导入 NbLayoutModule

@NgModule({
  imports: [
    NbSidebarModule,
    NbLayoutModule
 ]

您的错误也显示nb-action,而应该是 nb-actions ,请确保您没有错字

编辑

您还需要导入NbActionsModule。检查代码 here

答案 1 :(得分:1)

您必须在您的App模块以及任何子模块中导入NbLayoutModule。

 @NgModule({
  imports: [
      // ...
    NbLayoutModule.forRoot(),
  ],
})
export class AppModule { }

在您的子模块中导入为

@NgModule({
  imports: [
      // ...
    NbLayoutModule,
  ],
})
export class PageModule { }

答案 2 :(得分:-1)

导入 NbActionsModule 模块。它会起作用