Angular ng-bootstrap轮播无法正常工作？

Question

我正在尝试在我的Angular项目中实现ngbd-carousel-basic。我现在只想把它放在home.component中。但是，这是我尝试遵循文档中的代码后得到的结果（虽然将文件从html / ts编辑为.component.html和.component.ts）

所以，我是一个Angular noob。所以也许我忘了包括一步？以下是我到目前为止采取的步骤：

1. 在app.module.ts里面：从我的文件路径导入NgbdCarouselBasic。宣布它为声明。导入NgbModule，并在@NgModule，import NgbModule.forRoot()中。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

// Own components
import {NgbdCarouselBasic} from './shared/carousel/carousel-basic.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ViewAllRecordsComponent,
    NgbdCarouselBasic
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    TableModule,
    NgbModule.forRoot()
  ],
  providers: [
    TimeService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在home.component.html内：

<ngbd-carousel-basic></ngbd-carousel-basic>

---

这是我的依赖项。也许某些事情是不相容的，我没有意识到？

"dependencies": {
  "@angular/animations": "^5.2.0",
  "@angular/common": "^5.2.0",
  "@angular/compiler": "^5.2.0",
  "@angular/core": "^5.2.0",
  "@angular/forms": "^5.2.0",
  "@angular/http": "^5.2.0",
  "@angular/platform-browser": "^5.2.0",
  "@angular/platform-browser-dynamic": "^5.2.0",
  "@angular/router": "^5.2.0",
  "@ng-bootstrap/ng-bootstrap": "^1.0.4",
  "bootstrap": "^3.3.7",
  "core-js": "^2.4.1",
  "font-awesome": "^4.7.0",
  "jquery": "^3.3.1",
  "postcss": "^6.0.21",
  "primeng": "^5.2.4",
  "rxjs": "^5.5.6",
  "tether": "^1.4.3",
  "webpack": "^3.11.0",
  "zone.js": "^0.8.19"
},

Answer 1

需要在style.css文件中添加bootstrap css，添加以下行：@import "~bootstrap/dist/css/bootstrap.css";