内部にカルーセルを含むコンポーネントを作成しようとしています。
<ngb-carousel>
<template ngbSlide>
<img src="img1" alt="Random first slide">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</template>
<template ngbSlide>
<img src="img2" alt="Random second slide">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</template>
<template ngbSlide>
<img src="img3" alt="Random third slide">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</template>
</ngb-carousel>
これは私のコンポーネントです:
import {Component} from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'img-carousel',
templateUrl: './img-carousel.component.html',
styleUrls: ['./img-carousel.component.scss']
})
export class ImgCarouselComponent {
}
これが module.ts です。
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BookingComponent } from './booking.component';
import { ImgCarouselComponent } from './img-carousel/img-carousel.component';
@NgModule({
imports: [NgbModule.forRoot()],
exports: [BookingComponent],
declarations: [BookingComponent, ImgCarouselComponent],
providers: [],
})
export class BookingModule { }
問題は、画像がスタックされていないことです。もっと何かをインポートする必要がありますか、それとも重要なものが不足していますか?
Angular バージョン: 2.0.2 ng-bootstrap: @latest
system.js なしで Angular-cli を使用しています。