Почему мой nb-поиск не появляется на моей странице? - PullRequest
Новая
       17

Почему мой nb-поиск не появляется на моей странице?

0 голосов
/ 24 мая 2019

Я создал домашнюю страницу с навигационной панелью, которую я намеревался включить в поиск по небу, поскольку мне очень понравился его дизайн, но по какой-то причине после следования их инструкциям я так и не смог заставить его появиться. 

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

1 Ответ

1 голос
/ 26 мая 2019

Наиболее вероятная причина вашей проблемы

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() {
  }

}
...