javascript - 在 Angular 2 中渲染页面时如何使用加载器？

Question

我有一个 loader.gif 图像，其中包含要显示和隐藏的标志变量。

<div [hidden]="IsLoading" class="loadingDiv"></div>

在我的html中有200条记录，没有分页(要求是不需要分页)。所以我觉得渲染时间需要一些时间(大约5-10秒)。所以我计划使用loader。

cutomLoad() {
        this.IsLoading = false;
        this.tyreAndRimList = this.temptyreAndRimList;  // here having 200 records.       
        this.IsLoading = true;
    }

可能有人误解了我的上述问题。我已经尝试过上面的代码。代码运行速度非常快，因此无法看到加载程序，但页面渲染需要更多时间(我不想设置超时几秒钟)。我决定在页面渲染开始时显示加载程序，并在页面渲染结束时隐藏加载程序。但我对此一无所知。

编辑

我不想在更改导航时执行此操作。我在 $http 调用中使用了 observable。这样我就可以轻松使用加载程序了。那不是问题。主要问题是当我对 200 条记录进行过滤/排序时，同样的 200 条记录将重新呈现。这时候我想使用loader。

Answer 1

如果您决定使用路由解析器，那么您可以根据路由事件设置加载图像。像这样的事情:

export class AppComponent {
    pageTitle: string = 'Acme Product Management';
    loading: boolean = true;

    constructor(private router: Router) {

        router.events.subscribe((routerEvent: Event) => {
            this.checkRouterEvent(routerEvent);
        });
    }

    checkRouterEvent(routerEvent: Event): void {
        if (routerEvent instanceof NavigationStart) {
            this.loading = true;
        }

        if (routerEvent instanceof NavigationEnd ||
            routerEvent instanceof NavigationCancel ||
            routerEvent instanceof NavigationError) {
            this.loading = false;
        }
    }
}

因此，当您路由到组件时，加载设置为 true。当数据作为解析器的一部分加载时，图像将显示。然后当解析器数据完成时，路由完成并且加载设置为 false。

我在这里有一个路由解析的示例:https://github.com/DeborahK/Angular-Routing在 APM-Final 文件夹中。