Angular跨模块跳转时router-outlet的activate事件不触发如何修复

失效核心原因 #

你的代码存在3个直接导致activate事件逻辑不生效的问题：

1. AppComponent构造函数中this.isLogged=Event instanceof LoginComponent逻辑完全错误，Event是JS全局事件类，永远不可能是LoginComponent的实例，初始状态判断完全失效
2. 登录跳转逻辑写在LoginComponent的构造函数中，此时组件还未完成挂载到router-outlet的流程，会导致事件触发时序异常
3. 仅依赖activate事件做状态判断，没有兜底逻辑，刷新页面、提前跳转等场景都会漏触发

修复步骤 #

1. 修正AppComponent逻辑，增加路由监听兜底 #

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { SessionService } from './core/services/sessionService';
import { LoginComponent } from './modules/admin/pages/login/login.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Sinav Alemi Panel Web';
  isLogged:boolean=false;
  personel:any;
  constructor(private session:SessionService,private router:Router) { 
  }

  ngOnInit(): void {
    // 初始化主动判断登录状态
    this.initAuthStatus();
    // 监听路由结束事件，兜底处理activate漏触发场景
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.initAuthStatus();
      }
    })
  }

  showHide(event){
    console.log("entered");
    this.isLogged = event instanceof LoginComponent;
    if(!this.isLogged){
      this.personel = this.session.GetFromStorage("panel_admin");
    }
  } 

  private initAuthStatus() {
    // 优先从本地存储判断登录状态，比组件类型判断更可靠
    const admin = this.session.GetFromStorage("panel_admin");
    if (admin && admin.id > 0) {
      this.isLogged = false;
      this.personel = admin;
      return;
    }
    // 未登录场景判断当前是否为登录页
    this.isLogged = this.router.url.includes('login');
  }
}

2. 调整LoginComponent跳转时机 #

将构造函数中的自动跳转逻辑移到ngOnInit生命周期中，避免组件未挂载就跳转导致的事件时序异常：

// LoginComponent修改部分
constructor(private dataService: DataService, private router: Router, private session: SessionService) {
}

ngOnInit(): void {
  var x = this.session.GetFromStorage("panel_admin");
  if (x && x.id > 0) {
    this.session.SetToStorage(x, "panel_admin");
    this.router.navigateByUrl("/home");
  }
}

3. 核对路由配置 #

确认Login、Home组件都注册在顶级路由下，对应AppComponent的router-outlet，如果是嵌套路由需要在对应父级的router-outlet上绑定activate事件。

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