npm 安装:
npm install bootstrap
在 index.html 中引入 CSS 文件:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgbModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
其中,import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 是用于引入 NgbModule 的模块,包含了一些指令和服务,是模态框显示所依赖的必要项。
import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private modalService: NgbModal) {}
open() {
const modalRef = this.modalService.open(ModalContentComponent);
modalRef.componentInstance.name = 'World';
}
}
@Component({
selector: 'modal-content',
template: `
Hi there!
Hello, {{name}}!
`
})
export class ModalContentComponent {
name: string;
constructor(public activeModal: NgbActiveModal) {}
}
其中,open 方法用于打开模态框,ModalContentComponent