时间戳

首页 > 解决方案 > 我们如何刷新或重新加载 Angular 的子组件？

angular - 我们如何刷新或重新加载 Angular 的子组件？

问题描述

我有呈现 app-deal-partners 组件的 transaction.component.html，每当调用删除函数时，我想刷新并重新加载作为 app-deal-partners 组件的子组件。

我想重新加载 <app-deal-partners [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>

我们如何在 angular 中解决这个问题？谢谢。

#transaction组件ts代码

 delete(rowData: any) {
    this.isLoading = true;
    this.Service.delete(rowData.id)
      .pipe(finalize(() => { this.isLoading = false;}))
      .subscribe({
        next: (res) => {
        },
        error: (err) => {
          this.notificationService.showError('Something went wrong, Try again later.');
          this.isLoading = false;
        },
        complete: () => {
          this.isLoading = false;
        },
      });
  }

#transaction.component.html 代码呈现 app-deal-partners 代码

  <div style="padding-bottom: 20px;">
    <app-deal-partners [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>
  </div>

#app-deal-partners 代码 html

 <app-table-multi-sort (dataServiceEvent)="dataServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="data" (tableActionsEvent)="tableActions($event);" (editRowEvent)="editDeal($event)"></app-table-multi-sort>

标签： angulartypescript

解决方案

您可以使用 observables 来实现：

private userDeleted: Subject<any> = new Subject<any>();
public userDeleted$ = this.userDeleted.asObservable();
delete(rowData: any) {
  this.isLoading = true;
  this.Service.delete(rowData.id)
    .pipe( tap(_ => this.userDeleted.next(rowData)), finalize(() => { this.isLoading = false;}))
    .subscribe({
      next: (res) => {
      },
      error: (err) => {
        this.notificationService.showError('Something went wrong, Try again later.');
        this.isLoading = false;
      },
      complete: () => {
        this.isLoading = false;
      },
    });
}

模板：

<app-deal-partners [userDeleted$]="userDeleted$" [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>

和子组件逻辑：

@Input()
public userDeleted$: Observable<any>;

OnInit(){
  this.userDeleted$.subscribe(_ => {
    // Logic goes there
  })
}

推荐阅读