Question

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

我跑了npm install bootstrap ngx-bootstrap --save

像这样更新了我的angular.json：

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

这是我的app.module.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 { }

这是我的app.component.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样式。

我已经证明可以安装Bootstrap样式，因为我可以在页面的另一个div上使用'card'类。

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

Answer 1

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

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

如何在Angular 7中将Bootstrap JavaScript组件与ngx-bootstrap一起使用？

1 个答案: