解析服务完成后，角度隐藏启动屏幕

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后，如何隐藏启动屏幕？在定义启动屏幕时，或者在为解析中的主要组件准备数据时，我在哪里犯了错误？

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';
}

正在此处进行演示。