要使用Angular 7和ng-bootstrap来渲染模态框模板,需要按照以下步骤进行操作:
npm install -g @angular/cli
ng new my-app
cd my-app
npm install @ng-bootstrap/ng-bootstrap
src/app/app.module.ts
文件并导入所需的模块:import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgbModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
src/app/modal/modal.component.ts
:import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html'
})
export class ModalComponent {
constructor(private modalService: NgbModal) {}
open(content) {
this.modalService.open(content);
}
}
src/app/modal/modal.component.html
:
模态框标题
模态框内容
src/app/app.component.html
中使用新创建的模态框组件:
ng serve
现在,当你在浏览器中打开http://localhost:4200
时,你将看到一个按钮,点击按钮将会打开一个模态框。