如何使用 MatDialogRef 在 Angular 中重新加载/更新组件的模板

Question

我有一个用户管理组件 (gestion-usuarios)，它显示一个包含所有用户的列表。在此组件中，有一个添加新用户的按钮。单击此按钮将打开一个模态（一个新组件，nuevo-usuario-modal），其中包含一个填写它的表单，然后单击具有模态的保存按钮，将该新用户传递给用户管理组件。它可以工作，但不会使用新用户动态更新用户列表。我使用 MatDialogRef。

如何动态更新用户列表？我只想重新加载该组件而不是整个页面。

nuevo-usuario-modal.component.html

<div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
  <button type="button" class="close" aria-label="Close" (click)="cerrar()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form>
    <div class="form-group">
      <label for="dniCliente">DNI</label>
      <input id="dniCliente" class="form-control" name="dniCliente" [(ngModel)]="nuevoUsuario.dniCliente"> 
      <label for="nombre">Nombre</label>
      <input id="nombre" class="form-control" name="nombre" [(ngModel)]="nuevoUsuario.nombre">
      <label for="direccion">Direccion</label>
      <input id="direccion" class="form-control" name="direccion" [(ngModel)]="nuevoUsuario.direccion">
      <label for="email">Email</label>
      <input id="email" class="form-control" name="email" [(ngModel)]="nuevoUsuario.email">
      <label for="pwd">Contraseña</label>
      <input id="pwd" class="form-control" name="pwd" [(ngModel)]="nuevoUsuario.pwd">
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" [mat-dialog-close]="nuevoUsuario" (click)="guardarUsuario()">Guardar</button>
</div>

---

nuevo-usuario-modal.component.ts

import { Component, Output, EventEmitter,OnInit, ChangeDetectorRef, Inject } from '@angular/core';
import { MatDialogRef,MAT_DIALOG_DATA } from '@angular/material/dialog';
import { IUsuario } from 'interfaces/iusuario';
import { UsuariosService } from '../usuarios.service';
import { DataService } from '../data.service';



@Component({
  selector: 'nuevo-usuario-modal',
  templateUrl: './nuevo-usuario-modal.component.html',
  styleUrls: ['./nuevo-usuario-modal.component.css']
})
export class NuevoUsuarioModalComponent implements OnInit {
  closeResult = '';
  title = "Nuevo cliente"

  usuarios: IUsuario[] = [];

  nuevoUsuario: IUsuario = {
    direccion: "",
    dniCliente: "",
    email: "",
    nombre: "",
    pwd: "",
  };


  constructor(public dialogRef: MatDialogRef<NuevoUsuarioModalComponent>,@Inject(MAT_DIALOG_DATA) public data,
   public ServicioUsuarios: UsuariosService,
    private dataService: DataService){}

  @Output() recargar = new EventEmitter();


  guardarUsuario() {

    this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(() => {
      this.dataService.usuarios.push(this.nuevoUsuario);
      console.log(this.dataService.usuarios);
    });

  }

  cerrar() {
    this.dialogRef.close();
  }

  ngOnInit() {}


}

gestion-usuarios.component.html

<div>
<p class="p-2">Gestión de usuarios <button type="button" class="btn btn-primary" (click)="abrirModalNuevoUsuario()">Nuevo usuario</button></p>
<div>
    <form class="form">
        <div class="col-sm-5">
        <input type="text" [(ngModel)]="filtro" class="form-control"
        name="filtroNombre" id="filtroNombre" placeholder="Filtrando por...">
        </div>
        </form>
</div>

<div *ngFor="let usuario of usuarios | nombreUsuarioFiltro:filtro" class="p-2 divUsuariosIndividual">
    <div class="p-2 m-2">{{usuario.dniCliente}}</div>
    <div class="p-2 m-2">{{usuario.nombre}}</div>
    <div class="p-2 m-2">{{usuario.direccion}}</div>
    <div class="p-2 m-2">{{usuario.email}}</div>
    <button type="button" class="btn btn-primary" (click) = "editar(usuario)">Editar</button>
    <button type="button" class="btn btn-danger" (click) = "borrar(usuario.dniCliente)" >Borrar</button>

</div>

gestion-usuarios.component.ts

import { Component, OnInit, Output,EventEmitter, OnChanges, ChangeDetectorRef } from '@angular/core';
import { UsuariosService } from '../usuarios.service';
import { IUsuario } from '../../../interfaces/iusuario';
import { MatDialog, MatDialogConfig } from '@angular/material/dialog';


import { NuevoUsuarioModalComponent } from '../nuevo-usuario-modal/nuevo-usuario-modal.component'
import { EditarUsuarioModalComponent } from '../editar-usuario-modal/editar-usuario-modal.component';
import { DataService } from '../data.service';

@Component({
  selector: 'gestion-usuarios',
  templateUrl: './gestion-usuarios.component.html',
  styleUrls: ['./gestion-usuarios.component.css']
})
export class GestionUsuariosComponent implements OnInit,OnChanges {

  filtro: string = '';
   u: IUsuario = {
    direccion: "",
    dniCliente: "",
    email: "",
    nombre: "",
    pwd: "",
  }

  constructor(
    public ServicioUsuarios: UsuariosService,
    private dialog: MatDialog,public dataServicio: DataService


  ) { }

  borrar(dniCliente): void {
    var confirmacion = confirm("¿Seguro que quieres eliminar el usuario?");
    if (confirmacion) {
       this.ServicioUsuarios.borrarCliente(dniCliente).subscribe(() => this.ServicioUsuarios.getUsuariosArray().subscribe(
        recibe => this.usuarios = recibe,
        error => console.log(error),
      ));
    }
  }

  abrirModalNuevoUsuario() {

    const dialogRef = this.dialog.open(NuevoUsuarioModalComponent);

    dialogRef.afterClosed().subscribe(result => {
    console.log(result);    
     this.usuarios.push(result);
     console.log(this.usuarios);

    })

  }

  editar(usuario) {
    this.dialog.open(EditarUsuarioModalComponent,{data: usuario});
  }

  usuarios: IUsuario[] = [];

  ngOnInit() {

    this.usuarios = this.dataServicio.getUsuarios();
    this.ServicioUsuarios.getUsuariosConsola();

    this.ServicioUsuarios.getUsuariosArray().subscribe(
      recibe => {
        this.usuarios = this.dataServicio.getUsuarios();

        this.usuarios = recibe;
      },
      error => console.log(error),
    );

  }

 ngOnChanges(){
   this.ngOnInit();
 }


}

data.service.ts

import { Injectable, OnInit } from '@angular/core';
import { IUsuario } from 'interfaces/iusuario';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  usuarios: IUsuario[] = [];

  getUsuarios() {
    return this.usuarios;
  }


}

Answer 1

在这个文件中：nuevo-usuario-modal.component.ts

变化：

guardarUsuario() {

  this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(() => {
    this.dataService.usuarios.push(this.nuevoUsuario);
    console.log(this.dataService.usuarios);
  });

}

到

guardarUsuario() {

  this.ServicioUsuarios.crearUsuario(this.nuevoUsuario).subscribe(nuevoUsuar => {
    this.dialogRef.close(nuevoUsuar);
  });

}

我假设 crearUsuario 是一个端点，它应该在插入数据库后返回用户。将响应提供的用户传递回您订阅的 dialogRef。