仅使用X标记删除模式

Question

目标：您只能通过仅使用X标记来关闭模态，而不是在模态外部单击。

问题：当我尝试使用语法代码[config] =" {背景：'static'}"

时，不知道该如何解决

信息：

1. 我是Angular的新手
2. 使用VS代码和NGX-Bootstrap

这是最小样本stackblitz 复制问题。

谢谢！

Answer 1

BsModalService上的show方法将config对象作为第二个参数。您可以在此处指定背景选项：

在这里，尝试一下：

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

@Component({
    selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent{
  modalRef: BsModalRef;
  config = {
    backdrop: true,
    ignoreBackdropClick: true
  };
  constructor(private modalService: BsModalService) {}
  person:any={}
  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }
  openModalWithComponent() {
    this.modalRef = this.modalService.show(ModalContentComponent);
    this.modalRef.content.title = 'Modal with component';
  }
}
/* This is a component which we pass in modal*/
@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">{{title}}</h4>
    </div>
    <div class="modal-body">
    <input type="text" placeholder="Last Name">
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" >Save Last Name</button>
    </div>
  `
})
export class ModalContentComponent {
  title: string;
  constructor(private modalService: BsModalService) {}
}

---

这是工作示例stackblitz 您的参考