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现在是错误的，加载跨度被删除。