解决服务完成后角隐藏启动画面答案

【问题标题】：Angular hide splash screen after resolve service done解决服务完成后角隐藏启动画面
【发布时间】：2021-11-16 16:44:46
【问题描述】：

在我的 Angular 12 应用程序中，我在 app-root 中使用启动画面作为 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 后如何隐藏启动画面？我在定义初始屏幕或为解析中的主要组件准备数据的方式中哪里出错了？

【问题讨论】：

标签： angular angular-routing

【解决方案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。

【讨论】：