html - 为什么我的 nb-search 没有出现在我的页面中？

Question

我创建了一个带有导航栏的主页，我打算将星云搜索放入其中，因为我真的很喜欢它的设计，但由于某种原因，在按照他们的说明进行操作后，我仍然无法让它出现。

<nb-layout>
<nb-layout-header fixed>
    <nb-search type="rotate-layout></nb-search>
</nb-layout-header>
</nb-layout>

Answer 1

您的问题的最可能原因

https://github.com/akveo/nebular/issues/1275

您需要添加"./node_modules/nebular-icons/scss/nebular-icons.scss" 到angular.json

这会使搜索图标出现。

深入

我按照入门教程https://akveo.github.io/nebular/docs/guides/install-based-on-starter-kit#production-bundle设法完成了这项工作

我决定使用他们网站上的 html：

  <nb-layout>
    <nb-layout-header fixed>
      <nb-search type="rotate-layout"></nb-search>

    </nb-layout-header>

    <nb-sidebar>
    </nb-sidebar>

    <nb-layout-column>
      <nb-card accent="info">
        <nb-card-header>You searched for:</nb-card-header>
        <nb-card-body>
          <h3>{{ value || '-' }}</h3>
        </nb-card-body>
      </nb-card>
    </nb-layout-column>
  </nb-layout>

棘手的事情是确保导入所有正确的模块： NbThemeModule.forRoot({ name: 'default' }),在我安装时放入@nebula/themes

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

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'default' }),
    NbLayoutModule,
    NbCardModule,
    NbSidebarModule,
    NbSearchModule
  ],
  providers: [NbSidebarService],
  bootstrap: [AppComponent]
})
export class AppModule { }

再次重新使用网站上的示例代码：

@Component({
  ...
})
export class TestComponent implements OnInit {

  value = '';

  constructor(private searchService: NbSearchService) {

    this.searchService.onSearchSubmit()
      .subscribe((data: any) => {
        this.value = data.term;
      })

  }

  ngOnInit() {
  }

}