Angular 如何延迟启动角度应用程序以显示动画

我已经在

这里

标记之间的角度应用程序中添加了一些加载动画

---

我需要延迟开始以显示和检查此动画。我知道JS

setTimeout（）

但是应该放在哪里？

几天前，我在我的项目中应用了一个加载程序。以下是我是如何做到这一点的

步骤1

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

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

步骤2

在要使用该模块的组件的.ts文件中再次导入该模块，并在构造函数（）中对其进行初始化

步骤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);
  }

请记住，您还必须考虑您对 达到平滑的效果

更新

---

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

将加载程序组织为纯html/css，并将其放在此处的

中。这将是第一件事，将弹出给用户。当应用程序完成初始化时，它会将应用程序根目录的内容替换为应用程序根目录组件（有效地删除预加载程序）
它正在应用程序内部加载动画。当有人第一次打开我的网站时，我问了一下情况。我会在整个应用程序100%加载之前显示一些加载动画，只需将其导入主组件，并将其包含在模板和ngOnInt（）中。但如果要延迟应用程序的开始，该怎么办？有时加载速度太快，以至于你会看到一道闪光，这看起来真的很难看。我想确保我的应用程序总是在启动前等待，不管发生什么。你可以使用应用程序初始化器人为地延迟应用程序启动。