ngx-bootstrap CarouselModule 不工作

Question

我正在嘗試在我的 angular2 應用程序中使用輪播模塊。 這是我的 app.ts 文件。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {CarouselModule}  from 'ngx-bootstrap/carousel';
import { AppComponent } from './app.component';
import {AppRoutesModule} from './app.routes';
import { NavbarComponent } from './shared/components/navbar/navbar.component';

@NgModule({
  declarations: [
  AppComponent,
  NavbarComponent,
],
imports: [
  BrowserModule,
  AppRoutesModule,
  FormsModule,
  CarouselModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Bellow 是我在其中使用模塊的 home.component.ts 和 home.component.html

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

HTML 文件

<carousel>
  <slide>
    <img src="assets/images/wedding.jpg" alt="First slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/birthday.jpg" alt="Second slide" style="display: block; width: 100%;">
  </slide>
  <slide>
    <img src="assets/images/anniversary.jpg" alt="Third slide" style="display: block; width: 100%;">
  </slide>

當我運行代碼時，它會拋出以下錯誤。

'slide' 不是已知元素： 1. 如果 'slide' 是 Angular 組件，則驗證它是該模塊的一部分。 2. 要允許任何元素添加“NO_ERRORS_SCHEMA”到該組件的“@NgModule.schemas”。 (" [錯誤->]

任何幫助都會得到幫助

Answer 1

改變

從

import {CarouselModule}  from 'ngx-bootstrap/carousel';

至

import { CarouselModule } from 'ngx-bootstrap';

因為 import { CarouselModule } from 'ngx-bootstrap/carousel'; 不適用於system.js

還將它添加到EventModule導入下。 並在 app.module.ts 中導入EventModule

Answer 2

我不知道誰遇到了同樣的問題，但這是問題所在

在你的 homecomponnent.ts

從 'ngx-bootstrap/carousel' 導入 { CarouselConfig }；

並在你的@component 添加這一行

提供者：[{提供：CarouselConfig，useValue：{間隔：2500，noPause：true，showIndicators：true}}]}）

如果你想改變幻燈片的第二個，你只需要改變間隔號