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

【问题标题】：How do we refresh or reload a child component in angular?我们如何刷新或重新加载 Angular 的子组件？
【发布时间】：2021-10-11 19:29:56
【问题描述】：

我有呈现 app-deal-partners 组件的 transaction.component.html，每当调用 delete 函数时，我想刷新并重新加载 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>

【问题讨论】：

你为什么同时做.pipe(finalize(() => { this.isLoading = false;}))和complete: () => { this.isLoading = false; },？您可以删除 complete 块，因为 finalize 块已经这样做了。
您也可以从error 块中删除this.isLoading = false;，因为finalize 也已经涵盖了这一点。

标签： angular typescript

【解决方案1】：

你可以通过 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
  })
}

【讨论】：

我要补充一点，您还可以在没有观察者的情况下存储和传递来自父组件的列表，并监听子组件中的更改事件。像这里：stackoverflow.com/questions/40256891/…——这不是重复的吗？