Angular 2，我應該採取哪種方法來顯示加載指示？

Question

我有一個表組件：

@Component({ 
    moduleId: module.id, 
    selector: 'ag-table', 
    template: ` 
     <span *ngIf="isLoading">Loading</span> 
     <table class="table"> 
      rows loaded through @Input() rows; 
     </table> 
    ` 
}) 

然後，我有一個父組件：現在

@Component({ 
    moduleId: module.id, 
    selector: 'ag-page', 
    template: ` 
     <ag-table [rows]=rows></ag-table> 
    ` 
}) 

，在AG-頁，我需要從服務器獲取數據，所以我做通過服務的http請求，比方說page.service.ts。在這一刻，我想在我的ag表中顯示加載指示。

哪種方法最好？

1. 使用@ViewChild通過ag-page獲取組件實例並將isLoading設置爲true？

2. 創建一個table.service.ts，將它注入到TableComponent並使用observables來檢測數據何時加載。

3. 另一個建議？

Answer 1

您可以測試是否設置了輸入rows。

@Component({ 
    moduleId: module.id, 
    selector: 'ag-table', 
    template: ` 
     <span *ngIf="!rows">Loading</span> 
     <table class="table"> 
      rows loaded through @Input() rows; 
     </table> 
    ` 
}) 
export class AgTable { 
    @Input() 
    rows:Row[]; 
} 

當應用程序啓動，ag-page沒有任何行，以便傳遞給ag-table變量rows是不確定的。因此測試!rows返回true並顯示您的加載範圍。

在異步加載結束時，ag-page用新值覆蓋其行。通過輸入綁定，行被賦予ag-table。所以測試!rows現在是錯誤的，加載跨度被刪除。