ng-bootstrap 구성 요소가 예상대로 작동하지 않습니다.

Question

일부 ng-bootstrap 구성 요소는 해당 페이지 에서처럼 사용하지만 표시되지 않습니다. 특히, 나는 회전 목마 모달을 사용하고 여기에 코드입니다 해요 :

carousel.html

<ngb-carousel> 
    <template ngbSlide> 
     <div class="carousel-caption"> 
      <h1>Hustler for Men</h1> 
      <p class="lead">The beginning of a new era</p> 
     </div> 
    </template> 
    <template ngbSlide> 
     <div class="carousel-caption"> 
      <p class="lead">A startup that came to change the world</p> 
      <a class="btn btn-primary" href="#about">Know who we are!</a> 
     </div> 
    </template> 
    <template ngbSlide> 
     <div class="carousel-caption"> 
      <p class="lead">Our details will be provide as soon as we have them</p> 
      <a class="btn btn-primary" href="#contact">Look for our contact details!</a> 
     </div> 
    </template> 
</ngb-carousel> 

carousel.ts

import { Component, OnInit } from '@angular/core'; 
import {NgbCarouselConfig} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'], 
    providers: [NgbCarouselConfig] 
}) 
export class HomeComponent implements OnInit { 

    constructor(
    carouselConfig: NgbCarouselConfig 
    ){ 
    carouselConfig.interval = 5000; 
    carouselConfig.wrap = true; 
    carouselConfig.keyboard = true; 
    } 

    ngOnInit() { 
    } 

} 

modal.html

<template #content> 
    <div class="modal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h2 class="modal-title">Register</h2> 
        <button type="button" class="close" aria-label="Close" (click)="closeModal()"> 
         <span aria-hidden="true">&times;</span> 
        </button> 
       </div> 
       <div class="modal-body"> 
        <form (submit)="onRegisterSubmit()"> 
         <div class="form-group"> 
          <label>Name</label> 
          <input type="text" [(ngModel)]="name" name="name" class="form-control"> 
         </div> 
         <div class="form-group"> 
          <label>Userame</label> 
          <input type="text" [(ngModel)]="username" name="username" class="form-control"> 
         </div> 
         <div class="form-group"> 
          <label>Email</label> 
          <input type="text" [(ngModel)]="email" name="email" class="form-control"> 
         </div> 
         <div class="form-group"> 
          <label>Password</label> 
          <input type="password" [(ngModel)]="password" name="password" class="form-control"> 
         </div> 
         <div class="submit-wrapper"> 
          <input class="center" type="submit" class="btn btn-primary" value="Submit"> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

modal.ts

import { Component, OnInit } from '@angular/core'; 
import {ValidateService} from '../../Services/validate.service'; 
import {FlashMessagesService} from 'angular2-flash-messages'; 
import {AuthService} from '../../Services/auth.service'; 
import {Router} from '@angular/router'; 
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; 

@Component({ 
    selector: 'app-register', 
    templateUrl: './register.component.html', 
    styleUrls: ['./register.component.css'] 
}) 
export class RegisterComponent implements OnInit { 
    name: String; 
    username: String; 
    email: String; 
    password: String; 

    constructor(
    private validateService: ValidateService, 
    private flashMessage: FlashMessagesService, 
    private authService: AuthService, 
    private router: Router, 
    public registerModal: NgbActiveModal 
) { } 

    ngOnInit() { 
    } 

    closeModal(){ 
    this.registerModal.close('Cross click'); 
    } 
} 

난, 난 그냥 NG-부트 스트랩 페이지에 표시하지만 아무것도 게재되지 않습니다 그 같은 코드를 사용, 그래서 당신의 아이디어가 있다면 무엇을 할 수 위의 말했듯 여기서 일어나, 내게 알려줘!

미리 도움 주셔서 감사합니다.

Answer 1

프로젝트에 bootstrap.css를 추가했는지 확인하십시오. Angular CLI를 프로젝트 생성에 사용한 경우, .angular-cli.json의 styles 속성은 다음과 같습니다.

"styles": [ 
     "styles.css", 
     "../node_modules/bootstrap/dist/css/bootstrap.css" 
     ]