如何在angular中刷新或重新加载子组件?

Question

我有一个呈现app-deal-partners组件的transaction.component.html，每次调用delete函数时，我都想刷新并重新加载app-deal-partners组件的子组件

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

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

#transaction component的代码

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 code html

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

Answer 1

你可以通过observable来实现:

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

Answer 2

我将使用:

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

当isLoading为真时，组件被销毁，当它为假时，组件被重新加载。