为 AppComponent ngoninit 添加加载屏幕答案

【问题标题】：Adding a Loading Screen for AppComponent ngoninit为 AppComponent ngoninit 添加加载屏幕
【发布时间】：2021-12-04 02:06:58
【问题描述】：

我在 ngoninit 上为 app.component.ts 调用了一些身份验证和其他启动服务，以便在移动到主页之前屏幕保持黑色。我创建了一个加载器服务，它会在其处于活动状态时显示加载页面，但是我仍然看到黑屏。

就目前而言，我总是在加载器组件上看到 showLoader 为 false

app.component.ts

ngOnInit(){
    this.loaderService.showLoader;
    //startupservice calls and auth calls
    this.loaderService.hideLoader;
  }

loader.service

loaderSubject = new Subject<any>();


constructor(){

}

showLoader(){
    this.loaderSubject.next(true);
}

hideLoader(){
    this.loaderSubject.next(false);
}

loader.component

 showLoader = false; 

  constructor(private loaderService : LoaderService) { }

  ngOnInit(): void {
    this.loaderService.loaderSubject.subscribe((value) => this.showLoader = value);
  }

【问题讨论】：

乍一看您的代码似乎很奇怪，showLoader 在 init 时应该为 true，并且在服务完成其工作后其状态变为 false。然后第一次访问会显示loader，稍等片刻隐藏loader。
在 app.component.ts 上，确保您正在使用 this.loaderService.showLoader() 调用该函数。目前，它只是一个参考。订阅前应将主题转换为可观察的。其他几件事，但希望这能让你朝着正确的方向前进

标签： angular ngoninit

【解决方案1】：

这是因为 Angular 在创建子组件（加载器组件）之前首先在父组件（应用程序组件）上运行 ngOnInit()。创建加载器组件时，loaderSubject 已设置为 false。

当在应用组件中调用ngAfterViewInit() 时，您的加载器组件会被渲染。 Checkout this example.

【讨论】：