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添加到您的項目中。如果您使用的角度CLI爲項目生成，在你.angular-cli.json的樣式屬性可以如下所示：

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