javascript - Πώς να εμφανίσετε και να αποκρύψετε ένα modal φτιαγμένο με καθαρό html και css στο angular;
Έχω δημιουργήσει ένα modal με CSS και καθαρό HTML για την εφαρμογή Angular μου, προσπαθώ να το εμφανίζω και να το κρύβω με την ιδιότητα ng-if και με το @input.
αλλά το πρόβλημα είναι ότι μπορώ να το ανοίξω μόνο μία φορά και να το κλείσω μόνο μία φορά, αφού το κλείσω δεν θα ανοίξει ξανά.
και δεν ξέρω ποιο είναι το πρόβλημα στη λογική μου
Αυτό είναι το HTML του συστατικού μου modal.
<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 για να εμφανιστεί το αναδυόμενο παράθυρο και onHidePopup για να επιστρέψει στο γονικό
<app-modal-form [noDisplay]="noDisplay" (onHidePopup)="onHidePopup()"></app-modal-form>
Απάντηση #2
Μετά από μια ακόμη ματιά στον κώδικά σας, φαίνεται ότι το πρόβλημα είναι ότι ορίζετε το noDisplay να ισούται με την τιμή του modal. Αλλά το modal είναι μόνο false όταν το γονικό component φορτώνει για πρώτη φορά. Το ορίζετε σε true όταν ενεργοποιείτε αυτή τη λειτουργία:
activarModal() {
this.modal = true;
}
Τώρα, αυτό θα αφήσει το this.modal ως true μέχρι να επανεγκατασταθεί το γονικό στοιχείο. Οπότε, λογικά, γι' αυτό μπορείτε να ανοίξετε το modal μόνο μία φορά με την τρέχουσα υλοποίησή σας.
Για να το επιλύσετε, χρησιμοποιήστε @Output() someEvent=new EventEmitter(); για να στείλετε λεπτομέρειες πίσω στον γονικό από το παιδικό component, και επαναφέρετε το this.modal σε false όταν ενεργοποιηθεί αυτό το συμβάν. Το συμβάν που θέλετε να ενεργοποιήσετε για το @Output() είναι αυτό στο component του modal σας:
// close the modal
cerrar() {
this.noDisplay = false;
}
Δείτε αυτήν την απάντηση για περισσότερες λεπτομέρειες σχετικά με το @Output(): Μετάδοση συμβάντος από το παιδικό στοιχείο στο γονικό στοιχείο Angular 5