Angular 12首次加载时，如何在路由守卫解析前显示导航与页脚？

针对你遇到的首次加载时路由守卫异步解析导致整个页面空白（导航、页脚都不渲染）的问题，以下是几种可行的解决思路：

方案1：监听路由事件，分离UI渲染与路由守卫逻辑 #

核心思路是让导航栏、页脚优先渲染，仅在路由守卫解析期间阻塞router-outlet的内容，同时显示加载状态。

实现步骤： #

1. 在app.component.ts中注入Router，监听路由导航事件，维护加载状态：

import { Component } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isRouteLoading = true;

  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.isRouteLoading = true;
      } else if ([NavigationEnd, NavigationCancel, NavigationError].some(type => event instanceof type)) {
        this.isRouteLoading = false;
      }
    });
  }
}

2. 修改app.component.html，确保导航和页脚始终显示，router-outlet根据加载状态切换：

<nav>
  <!-- 导航栏静态内容直接渲染，动态权限菜单可在权限数据返回后更新 -->
</nav>

<div class="page-content">
  <!-- 守卫解析期间显示加载提示 -->
  <div *ngIf="isRouteLoading" class="loading-state">
    加载中...
  </div>
  <!-- 守卫完成后显示路由内容 -->
  <router-outlet *ngIf="!isRouteLoading"></router-outlet>
</div>

<footer>
  <!-- 页脚内容直接渲染 -->
</footer>

这样不管路由守卫是否完成，导航和页脚都会第一时间渲染，仅路由内容区域会在守卫解析完成后显示。

方案2：移除APP_INITIALIZER中的阻塞逻辑（若存在） #

如果你之前用APP_INITIALIZER来提前加载权限数据，这个机制会阻塞整个应用的初始化流程，导致app-root下的所有内容都无法渲染。此时需要：

• 把权限检查逻辑从APP_INITIALIZER中移除，移到路由守卫或app.component的ngOnInit中异步执行
• 导航栏先渲染静态框架，等权限数据返回后再更新动态菜单部分

方案3：拆分权限检查逻辑 #

将路由守卫中的权限检查拆分为两步：

1. 快速检查：从本地缓存（如localStorage）读取上次的权限数据，允许基础UI渲染
2. 异步校验：同时调用后端API更新最新权限，后续路由切换时使用最新数据

这样既保证了首次加载时UI不阻塞，又能确保权限的准确性。

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