Angular中使用routerLink時如何處理異常

Question

我有一個帶有routerLink的組件，並且路由模塊有一個路由。 ngOnInit 調用服務

this.myService.create(aId).subscribe(
data => { this.ourdata = data;
this.dataSource = new MatTableDataSource<test>(data.some);
},
err => console.error(err),
() => console.log('Done '+ JSON.stringify(this.ourdata))
);

和 html 顯示微調器，直到收到數據

<div *ngif="!ourdata">
<mat-spinner></mat-spinner>
</div>
<div *ngif="ourdata" class="centering-div">
...
</div>

如果出現異常，如何顯示對話框並停止微調器？ 我正在尋找 html 模板的變化

Answer 1

您可以使用訂閱的err回調。

error: boolean;
.....
this.myService.create(aId).subscribe(
data => { 
   this.ourdata = data;
   this.error = false;
   this.dataSource = new MatTableDataSource<test>(data.some);
},
err => { 
   console.error(err); 
   this.error = true;
   // call method that shows the dialog
   // or show the dialog in the HTML based on the value of error being true
}
() => console.log('Done '+ JSON.stringify(this.ourdata))
);

<div *ngif="!ourdata && !error">
<mat-spinner></mat-spinner>
</div>
<div *ngif="ourdata" class="centering-div">
...
</div>