Как показать и скрыть модальное окно, созданное с использованием чистых html и css в angular?

Question

Я создал модальное окно с css и чистым html для моего angular приложения, я пытаюсь показать его и скрыть с помощью свойства ng-if и @ input.

но проблема в том, что я могу открыть его только один раз и закрыть один раз, после закрытия он больше не откроется.

и я не знаю, в чем проблема в моем журнале c

Это мой модальный компонент HTML.

<div class="card mymodal z-depth-5" *ngIf="noDisplay">
  <form class="form center" (ngSubmit)="enviar(f)" #f="ngForm">
    <div>
      <h3 class="center">Crear Usuario</h3>
    </div>

    <!-- nombre  -->
    <div class="row">
      <div class="input-field col s6">
        <input id="name" type="text" name="nombre" [(ngModel)]="usuario.nombre" >
        <label for="first_name">Nombre</label>
      </div>

      <!-- nombre  -->

      <!-- Apellido  -->
      <div class="input-field col s6">
        <input id="name" type="text" [(ngModel)]="usuario.apellido" name="apellido">
        <label for="first_name">Apellido</label>
      </div>
    </div>
    <!-- Apellido  -->


    <!-- Usuario  -->
    <div class="row">
      <div class="input-field col s6">
        <input id="name" type="text" [(ngModel)]="usuario.usuario" name="usuario">
        <label for="first_name">Nombre de Usuario</label>
      </div>
      <!-- Usuario  -->

      <!-- Email  -->
      <div class="input-field col s6">
        <input id="email" type="email" [(ngModel)]="usuario.email" name="email">
        <label for="email">Email</label>
      </div>
    </div>
<!-- Email  -->

<!-- Passwor  -->
    <div class="row">
      <div class="input-field col s6">
        <input id="password" type="password" [(ngModel)]="usuario.password" name="password">
        <label for="password">Password</label>
      </div>
<!-- Passwor  -->

    </div>
    <div class="row">
      <div class="row">
        <div class="input-field col s12">
          <button  (click)="cerrar()" class="btn waves-effect waves-light right ml-1 mt-2 grey darken-1"
          type="submit" name="action">Cancelar
          </button>
          <button class="btn waves-effect  gradient-45deg-light-blue-cyan right mt-2" type="submit" name="action">Guardar
            <i class="material-icons right">save</i>
          </button>
        </div>
      </div>
    </div>
  </form>
</div>

CSS

.mymodal{
  position: fixed;
  z-index: 2000;
  height: 500px;
  width: 70%;
  background-color: aliceblue;
}

.form{
  padding-left: 10%;
  padding-right: 10%;
}

TS файл

import { Component, OnInit, Output, Input } from '@angular/core';
import { EventEmitter } from 'protractor';
import { AuthService } from 'src/app/services/services.index';
import { NgForm } from '@angular/forms';
import { NuevoUsuario } from 'src/app/models/nuevosUsuario';


@Component({
  selector: 'app-modal-form',
  templateUrl: './modal-form.component.html',
  styleUrls: ['./modal-form.component.css']
})
export class ModalFormComponent implements OnInit {

  usuario: NuevoUsuario;
  errorMessage: boolean;
  @Input() noDisplay: boolean;

  constructor(private register: AuthService) { }

  ngOnInit(): void {
    this.usuario = new NuevoUsuario();
  }


  enviar(form: NgForm) {
    if (form.invalid) {
      console.log('Formulario Invalido');
      return;
    }

    this.register.createUser(this.usuario).subscribe(resp => {
      console.log('usuario registrado');
    }, (err) => {
      this.errorMessage = true;
      console.log(err.message);
      console.log('ocurrio un error');
    }

    );
  }

  // close the modal
  cerrar() {
    this.noDisplay = false;
  }    

}

и здесь я пробую использовать

<app-modal-form [noDisplay]="modal" ></app-modal-form>

<div class="row">
  <button class="btn gradient-45deg-light-blue-cyan ml-5" (click)="activarModal()">Nuevo
    <i class="material-icons right">person_add</i>
  </button>
</div>

import { Component, OnInit } from '@angular/core';
import { UsuariosService } from '../../services/services.index';
import { Usuario } from 'src/app/models/usuario';

@Component({
  selector: 'app-admin-panel',
  templateUrl: './admin-panel.component.html',
  styleUrls: ['./admin-panel.component.css']
})
export class AdminPanelComponent implements OnInit {

  modal: boolean;
  usuariosData: Usuario[] = [];
  total: number;
  // total_activos: Usuario[] = [];

  constructor(private usuario: UsuariosService) { }

  ngOnInit(): void {
    this.getAllusers();
  }


  // optiene todos los usuarios
  getAllusers() {
    this.usuario.getAllUsers().subscribe((data: any) => {
      this.usuariosData = data.usuarios;
      this.total = this.usuariosData.length;
    });
  }


  // Open the modal
  activarModal() {
    this.modal = true;
  }    
}

введите описание изображения здесь

Answer 1

в родительском компоненте

export class AdminPanelComponent implements OnInit {

// open modal
activarModal() {
    this.noDisplay = true;
}

// close modal
onHidePopup() {
    this.noDisplay = false;
}

в вашем всплывающем компоненте

export class ModalFormComponent implements OnInit {
@Input() noDisplay;
// use output to pass event
@Output() onHidePopup = new EventEmitter();

cerrar() {
  this.onHidePopup.emit();
}

и в html admin вы должны передать noDisplay для отображения всплывающего окна и onHidePopup для поддержки родительского

<app-modal-form [noDisplay]="noDisplay" (onHidePopup)="onHidePopup()"></app-modal-form>

Answer 2

После повторного просмотра вашего кода выясняется, что проблема в том, что вы устанавливаете noDisplay равным значению modal. Но modal становится false только при первой загрузке родительского компонента. Вы устанавливаете его на true, когда запускаете эту функцию:

  activarModal() {
    this.modal = true;
  }    

Теперь this.modal останется true, пока родительский компонент не смонтирует заново. Итак, логически, вот почему вы можете открыть модальное окно только один раз с вашей текущей реализацией.

Чтобы решить эту проблему, используйте @Output() someEvent = new EventEmitter(); для передачи деталей обратно родительскому компоненту из дочернего компонента и повторно установите * 1014 От * до false при возникновении этого события. Событие, которое вы хотите инициировать для @Output(), находится в вашем модальном компоненте:

  // close the modal
  cerrar() {
    this.noDisplay = false;
  }

См. Этот ответ для получения более подробной информации о @Output(): Передача события от дочернего компонента к родительскому компонент Angular 5