2016-10-20 5 views
2

내부에 회전식 부품이 있어야합니다. 회전식 이미지가 중복되지 않습니다.

<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 { } 

문제는 이미지가 적재되지 않은 것입니다. 더 많은 것을 수입해야합니까, 아니면 뭔가 빠뜨린 것입니까?

각도 버전 : 2.0.2 NG-부트 스트랩 : 나는 system.js없이 각도-CLI 사용하고 @latest

.

+1

이 문제점을 발견했습니다. 나머지 응용 프로그램에서는 부트 스트랩 3을 사용하고 있었지만 부트 스트랩 4가 필요합니다. 오류가 아니며 자동으로 오류가 발생하지 않으므로 도움이되기를 바랍니다. –

답변

4

이것은 부트 스트랩 3에서 작동하지 않습니다. 버전 4.0으로 마이그레이션하면 문제가 해결됩니다.

0

나는이 문제도 가지고 있었고 그 원인은 내가 잘못된 경로를 통해 CSS를 끌어 내려고했기 때문입니다. 방금 CDN을 사용했을 때 예상대로 작동했습니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

1

나는 같은 문제를 가지고 있었고 cdn를 추가하고 그것을 잘 작동했다. cdn을 참조하지 않으려면 bootstrapstyles in .angular-cli.json`에 추가하십시오.

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
    ] 
관련 문제