javascript - როგორ აჩვენოთ და დამალა მოდალი, შექმნილი წმინდა HTML და CSS-ით Angular-ში?

მე შევქმენი მოდალი CSS-ის და წმინდა HTML-ის გამოყენებით ჩემი Angular აპლიკაციისთვის, ვცდილობ ვაჩვენო იგი და დავმალო იგი ng-if თვისებით და @input-ით.

მაგრამ პრობლემა ის არის, რომ მე შემიძლია მისი ერთი დაღება და ერთი დახურვა, დახურვის შემდეგ ის აღარ გაიხსნება.

და მე არ ვიცი, რა არის პრობლემა ჩემს ლოგიკაში

ეს არის ჩემი კომპონენტის მოდალური 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;
  }    
}

პასუხი #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 ადმინისტრატორში უნდა გადასცეთ noDisplay popup-ის სანახავად და onHidePopup მშობელის დაბრუნებისთვის

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

პასუხი #2

თქვენი კოდის კვლავ ნახვის შემდეგ ჩანს, რომ პრობლემა ის არის, რომ თქვენ უწოდებთ noDisplay მნიშვნელობას modal-ის. მაგრამ modal მხოლოდ false არის მაშინ, როცა მშობელი კომპონენტი პირველად იტვირთება. თქვენ მის მნიშვნელობას დაადგენთ true, როცა ამ ფუნქციას იძახებთ:

  activarModal() {
    this.modal = true;
  }    

ახლა, ეს დატოვებს this.modal როგორც true სანამ მამა კომპონენტი არ გადატვირთავს. ამიტომ, ლოგიკურად, სწორედ ამიტომ შეგიძლიათ გახსნათ მოდალი მხოლოდ ერთხელ არსებული განხორციელებით.

ამ პრობლემის შესასწორებლად გამოიყენეთ @Output() someEvent=new EventEmitter(); იმისათვის, რომ ინფორმაციას ბავშვის კომპონენტიდან დედა კომპონენტზე გადაგზავნოთ, და დაუწესეთ this.modal მნიშვნელობა false, როდესაც ეს მოვლენაა წარმოქმნილი. ის მოვლენა, რომლის გამორთვაც გინდათ @Output()-თან, თქვენს modal კომპონენტშია:

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

იხილეთ ეს პასუხი მეტი დეტალებისთვის @Output(): გადაეცით ღონისძიება ბავშვი კომპონენტიდან მშობელი კომპონენტისთვის Angular 5-ში