5

我在<app-root> HERE </app-root>标签之间的 Angular 应用程序中添加了一些加载动画。

我需要延迟开始显示并检查此动画。我知道 JS setTimeout()，但可能把它放在哪里？

4

3 回答 3

1

几天前，我在我的项目中应用了一个加载器。这是我实现它的方法。

步骤1

在 main.module.ts 文件中导入您的加载器并将其添加到您的导入数组中。我用过NgxSpinner。它非常简单，并带有一些非常好的加载器。

//Importing Loader
import { NgxSpinnerModule } from 'ngx-spinner';

第2步

在要使用它的组件的 .ts 文件中再次导入该模块，并在 constructor() 中对其进行初始化。

第 3 步

在订阅 observable 之前添加一个show()类，然后添加一个setTimeout()函数以在给定时间内隐藏微调器/加载器。

这是我项目的片段。

ngOnInit() {
    console.log("ngOnInit called");

    // getting the name of the book from the route
    let myBookName = this._route.snapshot.paramMap.get('name');
    console.log(myBookName);

    this.spinner.show();


    this.bookHttpService.getSingleBookInfo(myBookName).subscribe(

      data => {
        console.log(data);
        this.currentBook = data;
      },
      error => {
        console.log("some error occured");
        console.log(error.errorMessage);
      }
    )
    setTimeout(() => {
      this.spinner.hide();
    }, 2000);
  }

请记住，您还必须延迟响应以达到平稳的效果。

更新

此外，将加载程序放在该特定视图的模板文件的顶部。

于 2018-08-18T08:28:55.680 回答
1

将您的加载器组织为纯 html/css 并将其放入<app-root> HERE </app-root>. 这将是向用户弹出的第一件事。当应用程序完成初始化时，它将应用程序根目录的内容替换为应用程序根组件（有效地删除您的预加载器）

于 2018-08-18T10:03:41.460 回答
0

我认为使用APP_INITIALIZER是延迟应用程序启动的正确方法。

通过使用返回执行函数的 lambdaAPP_INITIALIZER初始化属性，您可以轻松添加延迟。为此，您应该将. 下面的示例创建 5 秒的延迟。useValuepromisesetTimeout()APP_INITIALIZERproviders@NgModule

import { APP_INITIALIZER } from '@angular/core';

@NgModule({
  providers: [
       {
         provide: APP_INITIALIZER, 
         useValue: () =>  new Promise(resolve =>
           setTimeout(resolve, 5000)
         ),
         multi: true
       }
    ]
    })

这将导致<app-root></app-root>显示 5 秒之间的内容。

于 2021-11-22T18:02:45.637 回答