时间戳

首页 > 解决方案 > 如何在打开内部模态时关闭 ng-Bootstrap 模态

bootstrap-modal - 如何在打开内部模态时关闭 ng-Bootstrap 模态

问题描述

我在模态中有一个模态。我假设是堆叠模式，但没有用于堆叠模式的 ng-bootstrap 语法。

当我单击第一个模态的链接时，打开内部模态，但不关闭前一个模态，这就是我想要做的，

我创建了一个名为app-login的模态组件，它位于标题组件按钮内。

header.component.html

<li class="nav-item mt-1">
   <app-login></app-login>
</li>

该模态的相关内容为：

login.component.html

<ng-template #content let-modal>
...
<small class="form-text text-muted text-left">
    <app-recuperar></app-recuperar>
</small>
...
</ng-template>

<button class="btn btn-outline-dark text-light mt-1" (click)="openVerticallyCentered(content)"> Entrar
  <i class="fas fa-sign-in-alt fa-fw text-light"></i>
</button>

登录组件.ts

import { Component, OnInit } from '@angular/core';
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";

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

  closeResult: string;

  constructor(private modalService: NgbModal) {}

  openVerticallyCentered(content) {
    this.modalService.open(content, { centered: true });
  }

  ngOnInit() {
  }
}

app-recuperar是内部模式

recuperar.component.html

<ng-template #content let-modal>
...
    <a href="#" (click)="openVerticallyCentered(content)"> Recuperar contraseña</a>
...
</ng-template>

<a href="#" (click)="openVerticallyCentered(content)"> Recuperar contraseña</a>

recuperar.component.ts

import { Component, OnInit } from '@angular/core';
import {NgbModal} from "@ng-bootstrap/ng-bootstrap";

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

  closeResult: string;

  constructor(private modalService: NgbModal) {}

  openVerticallyCentered(content) {
    this.modalService.open(content, { centered: true });
  }

  ngOnInit() {
  }

}

一切正常，两种模式都显示了，但问题是第二个模型是为了恢复密码而完成的，所以 login.component 保持可见没有任何意义。内部模态只是放置在第一个模态上。

这个想法是当我点击recuperar.component.html的链接时，首先关闭activeModal并同时打开新的模式。类似的东西（我知道语法是错误的）：

<a href="#" (click)="activeModal.close();openVerticallyCentered(content)"> Recuperar contraseña</a>

标签： bootstrap-modalangular7ng-bootstrap

解决方案

也许您可以关闭模​​态并从父组件打开另一个模态。为此，您可以在关闭它时传递一个参数：

activeModal.close(true);

然后检查此值以打开header.component.ts中的另一个模式：

const modalRef = this.modalService.open(content, { centered: true });
modalRef.result.then((recuperar) => {
  if (recuperar) {
    this.modalService.open(RecuperarComponent, { centered: true })
  }
}

在这种情况下，您不需要在recuperar.component.html<ng-template>中添加标签，并且该组件应该在您的模块中。entryComponent

推荐阅读