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-table中显示加载指示。

哪种方法最好？

使用@ViewChild通过ag-page获取组件实例并将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没有任何行，因此传递给rows的变量ag-table未定义。因此，测试!rows返回true，并显示您的加载范围。

在异步加载结束时，ag-page使用新值覆盖其行。使用输入绑定，行被赋予ag-table。因此，测试!rows现在为false，并且移除了加载范围。

Angular 2，我应该采取哪种方法来显示加载指示？

1 个答案: