Angular 2、加载提示应该用什么方法？

Question

我有一个 table 组件：

@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-table.

中显示加载指示

哪种方法最好？

通过ag-page使用@ViewChild获取组件实例并设置isLoading为true?
创建一个 table.service.ts，将其注入 TableComponent 并使用 observables 检测何时加载数据。
另一个建议？

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 return true 并且显示你的加载跨度。

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

Angular 2、加载提示应该用什么方法？

Angular 2, which approach I should take for showing a loading indication?

angular

loading

angular2-observables