html - 为什么我的 nb-search 没有出现在我的页面中?
问题描述
我创建了一个带有导航栏的主页,我打算将星云搜索放入其中,因为我真的很喜欢它的设计,但由于某种原因,在按照他们的说明进行操作后,我仍然无法让它出现。
<nb-layout>
<nb-layout-header fixed>
<nb-search type="rotate-layout></nb-search>
</nb-layout-header>
</nb-layout>
解决方案
您的问题的最可能原因
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() {
}
}
推荐阅读
- tensorflow - 如何在 Conv2d 中指定依赖于样本的内核/过滤器?
- unity3d - 场景的 GameObjects 轻微出血问题
- python - 如何从python中的条件列表中选择一个随机单词
- node.js - Flutter JSON数据问题
- javascript - 使用 promise() 运行下一个函数不起作用 - PLAIN JAVASCRIPT
- python - Python 中的 scanf() 生产问题
- visual-studio - 在我所有的浏览器中 Windows 10 更新 2004 后奇怪的本地主机证书问题!我怎样才能解决这个问题?
- linux - 在 WSL 2 上使用 Ansible 通过 snap 安装 microk8s
- angular - 在 Ionic 5 中使用 Capacitor 实现 Google Analytics
- leaflet - 将一个多边形的数据复制粘贴到另一个,LEAFLET