angular - 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-page 中，我需要从服务器获取数据，所以我通过服务发出 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没有任何行，因此rows 传递给的变量ag-table是未定义的。因此测试!rows返回 true 并显示您的加载范围。

在异步加载结束时，ag-page用新值覆盖其行。通过输入绑定，行被赋予ag-table. 所以!rows现在测试是假的，并且加载跨度被删除。