Angular 解决服务完成后隐藏启动画面

Question

在我的 Angular 12 应用程序中，我在应用程序根目录中使用启动画面作为 div。

<app-root>
   <div class="splash-screen">
        
    </div>
</app-root>

在根路径的路由器模块中，我在显示主要组件之前调用服务来解析数据。

RouterModule.forRoot([
            {
                path: '', component: AppMainComponent,
                resolve: {userInfo: userInfoResolver},

在我的主要组件中，我正在使用该数据

 ngOnInit() {
        this.route.data.subscribe(
            (data: Data) => {
                 this.userInfo=data['userInfo'];
            }
        );
    }

获取用户信息的服务运行几秒钟，此时启动画面已经消失，页面为白色，没有内容。

我的问题是：在 ngOnInit 方法中获取 userInfo 后如何隐藏启动画面？我在定义启动画面或在为 resolve 中的主要组件准备数据的方式上哪里出错了？

Answer 1

以这种方式使用启动画面来显示它完全可定制 -

在index.html-

<my-app></my-app>
<div id="splashScreen"></div>

在全局样式中添加一些样式（根据要求）-

#splashScreen{
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red; /* change as per need */
}

然后从应用中的任何位置移除启动画面 -

      constructor(private renderer: Renderer2) {}
    
      hideSplashScreen() {
        let splash = this.renderer.selectRootElement('#splashScreen');
        if (splash.style.display != 'none') splash.style.display = 'none';
      }

工作演示 here。

Angular 解决服务完成后隐藏启动画面

Angular hide splash screen after resolve service done

angular-routing

angular