如何在 Angular 7 中使用 Bootstrap JavaScript Components 和 ngx-boot

Question

我正在尝试使用本教程作为指南将Bootstrap Javascript添加到我的Angular 7应用程序中。

我跑npm install bootstrap ngx-bootstrap --save

更新了我的angular.json，如下所示：

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
]

这是我的应用程序模块.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BsDropdownModule.forRoot(),
    TooltipModule.forRoot(),
    ModalModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的应用程序组件.html：

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
          <a class="navbar-brand">
            <img src="assets/img/ngx-bootstrap.svg" class="logo">
          </a>
          <span class="navbar-brand">Angular + Bootstrap</span>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="#">
            Link <span class="sr-only">(current)</span>
          </a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown" dropdown> <!-- {1} -->
              <a dropdownToggle role="button"> <!-- {2} -->
                Dropdown <span class="caret"></span></a>
              <ul *dropdownMenu class="dropdown-menu"> <!-- {3} -->
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
              </ul>
          </li>
      </ul>
  </div>
</nav>

导航栏

显示为标准导航栏，未显示引导样式。

我已经证明了 Bootstrap 样式已安装，因为我能够在页面上的不同div 上使用"card"类。

有人可以告诉我我缺少什么，以便我的导航栏可以使用 Bootstrap 和 JavaScript？提前非常感谢

Answer 1

检查，引导程序安装到您的node_modules目录中，如果是这样 - 此配置就足够了：

 "styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.css"
        ],