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条记录将重新渲染。在这个时候我想使用装载机。

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。

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

Answer 2

我认为也不需要写这个功能如果您可能已经看过root.html组件在index.html中的工作方式，例如，在加载组件后，此“加载...”中的<app-root>loading...</app-root>将自动删除。所以你可以在这里使用相同的概念。 <component-selector><img src="..gif path"/></component-selector>。

Answer 3

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

    }

this.cutomLoad().then((resp) => {
      this.IsLoading = true;
  },
  error => {
      console.log(error);
      alert(error);
  });

如何在角度2中进行页面渲染时使用加载程序？

修改

3 个答案: