Как закрыть мод ng-Bootstrap на открытом внутри модального - PullRequest
Новая
       21

Как закрыть мод ng-Bootstrap на открытом внутри модального

0 голосов
/ 08 января 2019

У меня есть модал внутри модала. Предполагается, что это мод с накоплением, но без синтаксиса 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>

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>

1 Ответ

0 голосов
/ 10 января 2019

Может быть, вы можете закрыть модальное и открыть другое модальное из родительского компонента. Для этого вы можете передать параметр, когда закрываете его: 

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 })
  }
}

В этом случае вам не нужно добавлять тег <ng-template> в recuperar.component.html , и этот компонент должен находиться в entryComponent вашего модуля.

...