Question

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

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

Answer 1

几天前，我在项目中应用了一个加载程序。这是我实现的方式。

第1步

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

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

第2步

将该模块再次导入到要使用它的组件的.ts文件中，然后在Constructor（）中对其进行初始化。

第3步

在订阅可观察对象之前添加一个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);
  }

请记住，您还必须delay对达到平滑效果。

更新

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

Answer 2

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

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

2 个答案: