Angular中如何设置全局通用ngOnInit()以在所有页面执行？

你完全没必要在每个组件里重复写那段冗余代码！Angular提供了几种优雅的方式来实现全局路由触发公共逻辑，下面给你推荐两种最常用的方案：

方案一：使用路由守卫（CanActivate）创建全局守卫 #

这种方式可以在路由激活前/后执行逻辑，非常适合你的需求：

1. 首先创建一个全局守卫服务：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AppComponent } from './app.component';

@Injectable({
  providedIn: 'root'
})
export class GlobalRouteGuard implements CanActivate {
  constructor(private app: AppComponent) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // 在路由激活时调用公共方法
    this.app.doCommonStuffForEachPage();
    return true; // 返回true允许路由正常激活
  }
}

2. 然后在路由配置中，给需要触发逻辑的路由添加这个守卫（如果想全局生效，直接给根路由/父路由添加即可）：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GlobalRouteGuard } from './global-route.guard';
// 导入你的业务组件...

const routes: Routes = [
  {
    path: '',
    canActivate: [GlobalRouteGuard], // 根路由添加守卫，所有子路由都会触发逻辑
    children: [
      { path: 'page1', component: Page1Component },
      { path: 'page2', component: Page2Component }
      // 其他路由配置...
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

方案二：监听Router的NavigationEnd事件 #

这种方式会在每次路由导航完成后触发逻辑，适合不需要拦截路由、只需要执行后续操作的场景：

直接在AppComponent中监听路由事件：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    // 过滤出导航完成的事件，避免重复触发
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      this.doCommonStuffForEachPage();
    });
  }

  doCommonStuffForEachPage(): void {
    // 你的公共逻辑代码
    console.log('自动执行每个页面的公共操作');
  }
}

这样就完全不需要在各个子组件里写任何代码了，每次路由切换完成后都会自动调用这个公共方法。

额外建议：优化代码解耦 #

其实更优雅的做法是把doCommonStuffForEachPage()的逻辑抽离到一个独立的服务中，而不是直接依赖AppComponent，这样代码解耦性更强，也更符合Angular的最佳实践：

比如创建一个CommonPageService：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CommonPageService {
  doCommonStuffForEachPage(): void {
    // 公共逻辑实现
    console.log('执行页面公共操作');
  }
}

之后在守卫或者路由监听中注入这个服务即可，替代对AppComponent的依赖，让你的代码更整洁、更易于维护。

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