Bootstrap 轮播在 Angular 4 中出错

Question

我在控制台中遇到错误，无法让它工作。我目前正在使用 Angular 4 和 Bootstrap。

我的前端开发人员这个周末不在，所以无法获得 understand/find 如果有任何其他文件可以添加依赖项。我所知道的事实是；为了缩减首页大小，bootstrap首页没有添加JS功能

这是第一行的错误：

Uncaught Error: Template parse errors:
'ngb-carousel' is not a known element:
1. If 'ngb-carousel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-carousel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

这是我的 home.component.ts:

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { LocalStorageService } from 'angular-2-local-storage';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

import { AuthService } from '../../core/services/auth.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: [NgbCarouselConfig]
})
export class HomeComponent {
  title = 'Resume - Homepage';
  constructor(
    private authService: AuthService,
    private router: Router,
    public localStorageService: LocalStorageService,
    config: NgbCarouselConfig,
  ) {
    config.interval = 5000;
    config.wrap = true;
    config.keyboard = false;
  }
}

而我的 HTML:

<ngb-carousel>
  <ng-template ngbSlide>
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
    <img src="../../../assets/img/daddy.jpg"/>
  </ng-template>
  <ng-template ngbSlide>
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <img src="../../../assets/img/daddy.jpg"/>
  </ng-template>
</ngb-carousel>

Answer 1

您是否在 app.module 中添加了 NgbModule？

app.module 文件导入中应该是这样的：

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

Bootstrap 轮播在 Angular 4 中出错

Error with Bootstrap Carousel in Angular 4

ng-bootstrap

angular