Как обновить компонент после закрытия MatDialog и обновления данных в базе данных в Angular 6?

Question

Я изучаю стековое приложение MEAN с угловой версией 6. Здесь я хочу обновить компонент после добавления нового клиента / автомобиля / водителя / бронирования или обновления нового клиента / автомобиля / водителя / бронирования. Но после добавления нового значения компонент, отображающий все значения, не обновляется и не обновляется (не может увидеть текущее значение в это время), но когда я перенаправляю между компонентами, а затем возвращаюсь к тому же компоненту, он обновляет и показывает все значения.

Я хочу, чтобы при добавлении или обновлении значения из диалоговой формы оно отображалось в это время.

Вот add client component

export class AddClientComponent implements OnInit {

  clientForm: FormGroup;

  constructor(private fb: FormBuilder,
    private clientService: ClientService,
    private toastr: ToastrService,
    private router: Router,
    public dialogRef: MatDialogRef < AddClientComponent > ) {

    this.clientForm = this.fb.group({
      'clientname': new FormControl(""),
      'clientphoneno': new FormControl(""),
      'clientemail': new FormControl(""),
      'clientaddress': new FormControl("")
    });

  }

  ngOnInit() {
    this.router.navigate(['/admin/clients']);
  }

  saveClient(formdata: any) {
    let theForm = this.clientForm.value;
    this.clientService.addClient(theForm).subscribe(data => {
      if (data.success === false) {
        this.toastr.error(data.message);
      } else {
        this.toastr.success(data.message);
        this.ngOnInit();
        this.dialogRef.close();
      }
      this.clientForm.reset();
    });
  }

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

}

здесь client component, где отображаются добавленные значения

export class ClientsComponent implements OnInit {

  public currentClient: IClient;
  clients: any;

  addClientDialogRef: MatDialogRef < AddClientComponent > ;
  editClientDialogRef: MatDialogRef < EditClientComponent > ;

  constructor(public dialog: MatDialog,
    private dialogService: DialogService,
    private clientService: ClientService,
    private router: Router) {}

  openAddClientDialog() {
    this.dialogService.open(AddClientComponent, {
      width: '500px'
    })
  }

  openEditClientDialog(id) {
    this.dialogService.open(EditClientComponent, {
      width: '500px',
      data: {
        'id': id
      }
    })
  }

  ngOnInit() {
    this.getAllClients();
  }

  getAllClients() {
    this.clientService.getClients().subscribe((res) => {
      this.clients = res;
    }, err => {
      console.log(err);
    });
  }

  deleteClient(id) {
    this.clientService.deleteClient(id)
      .subscribe(res => {
        this.router.navigate(['./clients']);
        this.ngOnInit();
      }, (err) => {
        console.log(err);
      });
  }


}

вот это client service

addClient(oClient) {
  let headers = new Headers({
    'Content-Type': 'application/json'
  });
  let options = new RequestOptions({
    headers: headers
  });
  return this._http.post('http://localhost:3000/admin/clients/add', JSON.stringify(oClient), options).pipe(
    map((response: Response) => response.json()));
}

getClients() {
  let headers = new Headers({
    'Content-Type': 'application/json'
  });
  let options = new RequestOptions({
    headers: headers
  });
  return this._http.get('http://localhost:3000/admin/clients', options).pipe(
    map((response: Response) => response.json()));
}

getClient(clientid) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  let options = new RequestOptions({
    headers: headers
  });
  return this._http.get(`http://localhost:3000/admin/clients/${clientid}`, options).pipe(
    map((response: Response) => response.json()));
}

editClient(clientId, oClient) {
  let headers = new Headers({
    'Content-Type': 'application/json'
  });
  let options = new RequestOptions({
    headers: headers
  });
  return this._http.put(`http://localhost:3000/admin/clients/edit/${clientId}`, JSON.stringify(oClient), options).pipe(
    map((response: Response) => response.json()));
}

Answer 1

Вы звоните getAllClients() только во время перехвата OnInit жизненного цикла ClientsComponent. Это означает, что он будет только загружать клиентов при инициализации компонента (именно поэтому вы видите нового клиента при переходе назад и обратно, так как компонент реинициализируется и ловушка жизненного цикла OnInit снова выстрелил).

Чтобы противостоять этому, у вас есть два варианта (ну, более двух, если вы использовали управление состоянием (например, ngRx)).

1) Когда вы добавили нового клиента и закрыли диалоговое окно, немедленно снова вызовите getAllClients(), подписавшись на событие afterClosed MatDialog

this.addClientDialogRef.afterClosed().subscribe(() => { this.getAllClients(); } );

или

2) Предоставьте новый клиентский объект через событие afterClosed из самого диалогового окна и отправьте новый объект в массив clients. Единственное предостережение: вам нужно вернуть новый клиентский объект из вашего HTTP-запроса в saveClient

AddClientComponent

saveClient(formdata: any) {
    let theForm = this.clientForm.value;
    this.clientService.addClient(theForm).subscribe(data => {
       if (data.success === false) {
          this.toastr.error(data.message);
       } else {
          this.toastr.success(data.message);
          this.ngOnInit();
          this.dialogRef.close(data.client); // <--- Assuming the new object comes under the 'client' key of your response.
       }
       this.clientForm.reset();
    });
}

ClientsComponent

addClientDialogRef.afterClosed().subscribe((client: Client) => {
    this.clients.push(client);
}

Событие afterClosed задокументировано (кратко) здесь: https://material.angular.io/components/dialog/overview

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

dialogRef.afterClosed().subscribe(result => {   console.log(`Dialog
   result: ${result}`); // Pizza! });

dialogRef.close('Pizza!');