Question

我在模态中有一个模态。我假设是堆叠模式，但没有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>

login.component.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>

recuperarar.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，同时打开新的moda。这样的事情（我知道语法是错误的）：

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

Answer 1

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

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中。

如何在打开内部模式时关闭ng-Bootstrap模式

1 个答案: