无Zone.js的Angular路由问题：ngOnInit未触发的解决方案咨询

Hey there! I get exactly what you're dealing with—ditching Zone.js in Angular 9 (with Ivy) to boost your hybrid app's performance, but hitting a wall where ngOnInit won’t fire when navigating to your /dashboard route, especially when loading it directly from the address bar. Let’s break down the root cause and the best fixes for this:

First, a quick recap: Zone.js’s main job is to automatically catch async operations (like route navigation, HTTP calls, or timer events) and trigger Angular’s change detection for you. When you opt out of Zone.js, those async triggers vanish—so Angular has no idea when it needs to update components or run lifecycle hooks like ngOnInit. This is why both Angular 8 and 9 have this same issue; Ivy just makes running without Zone.js more feasible, but doesn’t change this core behavior.

1. Global Route Event Listener (Most Reliable) #

The cleanest approach is to set up a global listener for route navigation completion, then trigger change detection at the root level. This covers both router.navigate calls and direct address bar loads:

In your root AppComponent, inject Router and ChangeDetectorRef, then listen for the NavigationEnd event:

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

export class AppComponent implements OnInit {
  constructor(private router: Router, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(() => {
        // Trigger change detection from the root, which propagates to all child components
        this.cdr.detectChanges();
      });
  }
}

This way, every time a route finishes loading (no matter how you got there), Angular will run change detection, and your ngOnInit hooks will fire as expected.

2. Component-Level Change Detection #

If you only need to target specific route components (like your DashboardComponent), you can listen to route activation directly in the component:

import { ActivatedRoute } from '@angular/router';
import { ChangeDetectorRef, OnInit } from '@angular/core';

export class DashboardComponent implements OnInit {
  constructor(private route: ActivatedRoute, private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    // Listen for changes to the route URL (covers direct loads and navigation)
    this.route.url.subscribe(() => {
      // Trigger change detection for this component and its children
      this.cdr.detectChanges();
      // Alternatively, use markForCheck() if you're using OnPush strategy
      // this.cdr.markForCheck();
    });
  }
}

This is useful if you want to keep change detection localized, but you’ll need to repeat this logic for every route component that has the issue.

3. Refine Your router.navigate Workaround #

Your existing workaround works, but you can simplify it using ChangeDetectorRef instead of markDirty:

this.router.navigate(['dashboard']).then(() => {
  this.cdr.detectChanges();
});

That said, the global route listener will make this manual step unnecessary for all navigation calls.

Since you’re optimizing for performance in a hybrid app, consider these extra tweaks:

• Use the OnPush change detection strategy for components that don’t need frequent updates—this reduces unnecessary change detection cycles.
• For non-Angular async operations (like native JS events), manually trigger change detection only when you need to update the Angular view.
• Avoid overusing detectChanges(); prefer markForCheck() when using OnPush to only mark components for check in the next cycle, rather than forcing an immediate check.

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