typescript 如何刷新或重新加载Angular 中的子零部件？

chhqkbe1 于 2022-12-14 发布在 TypeScript

关注(0)|答案(2)|浏览(206)

我有transaction.component.html，它呈现app-deal-partners组件，每次调用删除函数时，我都想刷新并重新加载子组件，即app-deal-partners组件。
我要重新加载<app-deal-partners [transaction]="transaction" [forApprovalResponse]="forApprovalResponse"></app-deal-partners>
我们该怎么解决这个问题呢？谢谢。

事务组件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代码呈现应用交易合作伙伴代码

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

应用程序交易合作伙伴代码html

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

typescript

来源：https://stackoverflow.com/questions/69531537/how-do-we-refresh-or-reload-a-child-component-in-angular

2条答案

按热度按时间

qncylg1j1#

你可以通过观察来实现这一点：

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
  })
}

赞(0）回复(0）举报 2022-12-14

zf9nrax12#

我会用途：

<app-deal-partners *ngIf="!isLoading" [transaction]="transaction"  [forApprovalResponse]="forApprovalResponse"></app-deal-partners>

当isLoading为true时，组件将被销毁;当它为false时，组件将被重新加载。

赞(0）回复(0）举报 2022-12-14

我来回答

typescript 如何刷新或重新加载Angular 中的子零部件？

事务组件ts代码

transaction.component.html代码呈现应用交易合作伙伴代码

应用程序交易合作伙伴代码html

2条答案

相关问题

热门标签

最新问答