angular7使用ngx-bootstrap-modal

最新推荐文章于 2022-01-05 14:44:55 发布

banana_013

最新推荐文章于 2022-01-05 14:44:55 发布

阅读量694

点赞数

本文链接：https://blog.csdn.net/qq_36620379/article/details/103773392

版权

TemplateRef 是 angular的 核心类
BsModalService 和 BsModalRef是 ngx-bootstrap里面的services

1.安装项目目录安装

npm install ngx-bootstrap --save

2.引入 module文件

import { ModalModule } from 'ngx-bootstrap';

@NgModule({
  imports: [
    ModalModule.forRoot(),
  ],
})
export class BootstrapModalModule { }

3.TS文件

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { TemplateRef } from '@angular/core';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
  selector: 'app-bootstrap-modal',
  templateUrl: './bootstrap-modal.component.html',
  styleUrls: ['./bootstrap-modal.component.scss']
})
export class BootstrapModalComponent implements OnInit {
  modalRef: BsModalRef;
  constructor(private modalService: BsModalService) { }

  ngOnInit() {
  }

  showModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
    hideModal() {
    this.modalService.hide(1);
  }
}

4.HTML文件

<button type="button" class="btn" (click)="showModal(template)">打开模态框按钮</button>

<ng-template #template>
  <div class="modal-body" style="color: red">
    秃然变强
  </div>
</ng-template>