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-bootstrap页面中显示的那样，但没有任何内容显示出来，所以如果您对这里可能发生的事情有所了解，请告诉我！

提前感谢您的帮助！

Answer 1

确保已将bootstrap.css添加到项目中。如果您使用Angular CLI进行项目生成，则.angular-cli.json中的styles属性可能如下所示：

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

ng-bootstrap组件未按预期工作

1 个答案: