1

我是 Nebular 的新手，是否还有其他基于 Nebular 的详细文档？
我已经尝试在模块中插入一个组件。
我用侧边栏模块制作了一个侧边栏组件。

应用模块

import { BrowserModule } from '@angular/platform-browser';<br>
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 { SideBarComponent } from './side-bar/side-bar.component';
import { SideBarModule } from './side-bar/side-bar.module';

@NgModule({
  declarations: [
    AppComponent,
    // SideBarComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    SideBarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<nb-layout>

  <nb-layout-header fixed>
  <!-- Insert header here -->
  <a routerLink="/side-bar" routerLinkActive="active">SIDEBAR</a>

  </nb-layout-header>

  <nb-layout-column>

    <!--The content below is only a placeholder and can be replaced.-->


  </nb-layout-column>

  <nb-layout-footer fixed>
  <!-- Insert footer here -->
  </nb-layout-footer>

</nb-layout>

侧边栏.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SideBarComponent } from './side-bar.component';
import { NbLayoutModule } from '@nebular/theme';
// import { SideBarService } from '../services/side-bar.service';



@NgModule({
  declarations: [SideBarComponent],
  imports: [
    CommonModule,
    NbLayoutModule,
  ]
})
export class SideBarModule { }

侧边栏.comonent.ts

import { Component, OnInit } from '@angular/core';
import {MatSidenavModule} from '@angular/material/sidenav';
import { NbSidebarService } from '@nebular/theme';

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.scss']
})
export class SideBarComponent implements OnInit {

  constructor(private sidebarService:NbSidebarService){}
ngOnInit(){

}
toggle() {
  this.sidebarService.toggle(true);
  return false;
}

  }

边栏.html

<nb-layout>

  <nb-layout-header subheader>
    <a href="#" (click)="toggle()"><i class="nb-menu"></i></a>
  </nb-layout-header>

  <nb-sidebar></nb-sidebar>

  <nb-layout-column>Layout Content</nb-layout-column>
</nb-layout>

服务

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

@Injectable({
  providedIn: 'root'
})
export class SideBarService {

  constructor() { }
}

我期待将程序作为侧边栏运行。
但是如何解决这个错误呢？

未捕获的错误：模板解析错误：
'nb-sidebar' 不是已知元素：
1. 如果'nb-sidebar' 是 Angular 组件，则验证它是否是该模块的一部分。
2. 如果“nb-sidebar”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。(" </nb-layout-header>

[错误->]<nb-sidebar></nb-sidebar>

<nb-layout-column>布局内容</nb-layout-column> "): ng:///SideBarModule/SideBarComponent.html@6:2

有人可以帮忙吗？

4

3 回答 3

0

尝试导入SideBarModule您的sidebar.module.ts而不是App.module

于 2019-05-24T09:46:03.907 回答
0

您还需要NbSidebarModule在 AppModule 和 SideBarModule中导入

app.module.ts

import {NbSidebarModule} from '@nebular/theme'

@NgModule({
  //...
  imports: [
    //...
    SideBarModule,
    NbSidebarModule.forRoot() //<== add this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

侧边栏.module.ts

import {NbSidebarModule} from '@nebular/theme'

@NgModule({
  //..
  imports: [
    NbSidebarModule //<== add this
  ]
})
export class SideBarModule { }
于 2019-05-24T11:56:36.310 回答
0

尝试这个

// sidebar.module.
import { NbSidebarService } from '@nebular/theme';

// also import
  imports: [
    NbSidebarService 
  ]
})
于 2019-05-24T10:55:49.590 回答