Nebular: Layout-Header, как добавить выпадающий список к компоненту

Question

Моя компания является новичком в Nebular, и у нас есть стандартный заголовок, который включает в себя выпадающий список пользователей (bootstrap), который я хотел бы включить в nb-layout-header.

Возможно ли это и если да, то как этого достичь. вот фрагменты нашего кода:

Главная страница:

<nb-layout center>  
  **<nb-layout-header fixed>
      <nb-header></nb-header>
  </nb-layout-header>**

  <nb-sidebar class="menu-sidebar"
              tag="menu-sidebar"
              responsive>
    <nb-sidebar-header>
      </i> Menu </span>-->
      <nb-menu [items]="sidebarHeaderMenu" (click)="toggleSideBar()"> </nb-menu>

    </nb-sidebar-header>
    <nb-menu [items]="subMenu"></nb-menu>
  </nb-sidebar>


  <nb-layout-column>

    <!--<router-outlet></router-outlet>-->
    <span style="width: 100vw">Place holder</span>

  </nb-layout-column>


  <nb-layout-footer>
  </nb-layout-footer>
</nb-layout>*

Код заголовка nb:

<div class="header-container">
     <div class="logo-container">        
        <div class="logo" (click)="goToHome()">
          <img class="header-logo" src="../../assets/images/mylogo.png" alt="My LOGO">
        </div>
    </div>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Выпадающее меню не отображает события в заголовке макета. Любая помощь будет оценена..

Благодарю вас

Answer 1

Некоторые компоненты Bootstrap требуют использования JavaScript для работы ( документы Bootstrap), поэтому убедитесь, что вы включили все необходимые файлы в angular.json, Это должно выглядеть примерно так:

  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ],
  "scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
  ],

Также нужно добавить @nebular/bootstrap пакет для работы с бутстрапом. См. Документы для руководства.

И, кстати, как правило, Bootstrap и jQuery не используются напрямую в приложениях Angular. Например, есть пакет ng-bootstrap. Тогда вам не нужны jQuery и Bootstrap js файлы.