关闭从另一个组件打开的ngx-modal [英] Close ngx-modal opened from another component

问题描述

我有一个使用以下代码在单击按钮时显示模式的组件:

I have a component that shows up a modal when click a button, using this code:

constructor(    
    private modalService: BsModalService
) {}

showModal() {
    this.bsModalRef = this.modalService.show(AboutComponent);
}

由于它没有对 bsModalRef 的引用，如何从AboutComponent.ts中关闭此模式?

How to close this modal from the AboutComponent.ts since it does not have a reference to bsModalRef?

AboutComponent.html:

AboutComponent.html:

<div class="modal-header">
  <h4 class="modal-title pull-left">teste</h4>
  <button type="button" class="close pull-right" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <h1>teste</h1>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="closeModal()">Fechar</button>
</div>

AboutComponent.ts

AboutComponent.ts

import { Component, OnInit } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {

  constructor(private modalService: BsModalService) { }

  ngOnInit() {

  }

  closeModal() {
    ????????????
  }
}

推荐答案

理想的解决方案是:

在AboutComponent.ts中，我们必须注入BsModalRef而不是BsModalService:

At the AboutComponent.ts we have to inject BsModalRef instead of BsModalService:

constructor(public modalRef: BsModalRef) { }

这样做，只需在模板中更改click事件:

Doing so, in the template just change the click event:

<button type="button" class="btn btn-default" (click)="modalRef.hide()">Fechar</button>

这篇关于关闭从另一个组件打开的ngx-modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！