如何在Angular项目中实现站点打开时先展示数秒加载页再跳转首页

步骤1：创建开屏过渡组件 #

首先生成一个专门用于展示过渡效果的组件，比如命名为 SplashComponent，你可以在这个组件里自定义开屏动画、品牌logo、加载提示等任意你想要展示的内容。

步骤2：修改路由配置 #

调整你的 app.routing.ts 配置，将根路径指向开屏组件，替换原来的直接重定向逻辑：

const routes: Routes = [
  // 根路径指向开屏组件
  {path: "", component: SplashComponent},
  {path: "home", component: HomeComponent},
  // 原来的多层id路由可以简化，不用逐个写，匹配1到5层id即可
  {path: ":id/:id?/:id?/:id?/:id?", component: OverviewComponent},
  {path: "**", redirectTo:"home"}
];

说明：路由参数后加?表示可选参数，上面的写法可以兼容1到5层id的路径，和你原来写5条路由的效果完全一致。

步骤3：给开屏组件添加自动跳转逻辑 #

在 splash.component.ts 中添加定时跳转逻辑，也可以根据资源加载状态动态调整跳转时机：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-splash',
  templateUrl: './splash.component.html',
  styleUrls: ['./splash.component.css']
})
export class SplashComponent implements OnInit {
  // 自定义过渡时长，单位为毫秒，示例为3秒
  private splashDuration = 3000;

  constructor(private router: Router) { }

  ngOnInit(): void {
    // 方式1：固定时长后跳转
    setTimeout(() => {
      this.router.navigate(['/home']);
    }, this.splashDuration);

    // 方式2：如果需要等后台资源加载完再跳转，可以结合资源加载回调实现，示例：
    // this.resourceLoadService.loadAllAssets().subscribe(() => {
    //   this.router.navigate(['/home']);
    // })
  }
}

可选优化 #

如果要避免用户直接访问/home跳过开屏页，可以添加路由守卫，判断是否已经展示过开屏，可根据你的业务需求自行调整。

内容的提问来源于stack exchange，提问作者Rod