[英]How to use nebular with angular?
我正在按照https://akveo.github.io/nebular/docs/guides/create-nebular-page#create-nebular-page來創建星雲頁面,但它會拋出多個錯誤,如下所示:
01: 'nb-sidebar' is not a known element:
1. If 'nb-sidebar' is an Angular component, then verify that it is part of this module.
2. If 'nb-sidebar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
4 <nb-sidebar>Sidebar Content</nb-sidebar>
我創建了一個模塊,當我 go 到那個頁面時,它對一些隨機文本工作正常,但是當我添加 nebular 代碼時,它會拋出錯誤。
組件html中使用的代碼:
<nb-layout>
<nb-layout-header fixed>Company Name</nb-layout-header>
<nb-sidebar>Sidebar Content</nb-sidebar>
<nb-layout-column>
Page Content <button nbButton>Hello World</button>
</nb-layout-column>
</nb-layout>
模塊:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { NbSidebarModule, NbLayoutModule, NbButtonModule } from '@nebular/theme';
import { NbIconModule } from '@nebular/theme';
@NgModule({
declarations: [],
imports: [
CommonModule,
DashboardRoutingModule,
NbLayoutModule,
NbSidebarModule,
NbButtonModule,
NbIconModule,
]
})
export class DashboardModule { }
組件代碼:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
應用模塊:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
import { NbEvaIconsModule } from '@nebular/eva-icons';
import { NbSidebarModule} from '@nebular/theme';
import { DashboardComponent } from './pages/components/dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,
DashboardComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
NbThemeModule.forRoot({ name: 'default' }),
NbLayoutModule,
NbEvaIconsModule,
NbSidebarModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
您需要將以下內容添加到AppModule :
imports: [
// ...
NbSidebarModule.forRoot(),
],
並且,正如您已經完成的那樣,將NbSidebarModule
添加到您的功能模塊中。 參見NbSidebarComponent
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.