Angular 4：隐藏祖父组件router-outlet上方模板的优化方案

Great question! Passing events up through multiple component levels with emitters can quickly become hard to maintain—let's walk through a few cleaner, more Angular-idiomatic solutions to handle this scenario.

Option 1: Listen to Router Events & Check Active Route Components #

You can leverage Angular's Router service to monitor navigation events, then traverse the active route tree to detect when the PreMigrationComponent is loaded. This keeps the logic contained within the grandparent component without needing cross-component event bubbling.

Step 1: Add Logic to ProjectDetailsComponent #

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { PreMigrationComponent } from './path-to/pre-migration.component';

@Component({
  selector: 'app-project-details',
  templateUrl: './project-details.component.html'
})
export class ProjectDetailsComponent implements OnInit {
  hideHeaderContent = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // Traverse the entire active route tree to find the grandchild
      let currentRoute = this.router.routerState.root.firstChild;
      let foundGrandchild = false;

      while (currentRoute) {
        if (currentRoute.component === PreMigrationComponent) {
          foundGrandchild = true;
          break;
        }
        currentRoute = currentRoute.firstChild;
      }

      this.hideHeaderContent = foundGrandchild;
    });
  }
}

Step 2: Update the Grandparent Template #

Use *ngIf to conditionally hide the header content:

<div *ngIf="!hideHeaderContent" class="ui-step ui-step--alt active ui-step-change">
  <div class="step__icon step__icon--small" [routerLink]="['gathering']">1</div>
  <div class="step__label">Data Gathering</div>
</div>
<router-outlet></router-outlet>

Option 2: Use a Shared State Service #

A lightweight shared service lets you communicate state changes between components without tight coupling. This is great if you need to reuse this state logic elsewhere in your app.

Step 1: Create the Shared Service #

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ComponentVisibilityService {
  private _hideProjectHeader = new BehaviorSubject<boolean>(false);
  hideProjectHeader$: Observable<boolean> = this._hideProjectHeader.asObservable();

  setHideProjectHeader(hide: boolean): void {
    this._hideProjectHeader.next(hide);
  }
}

Step 2: Update the Grandchild Component #

Tell the service to hide the header when the grandchild loads, and reset it when it unloads:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ComponentVisibilityService } from '../path-to/component-visibility.service';

@Component({
  selector: 'app-pre-migration',
  templateUrl: './pre-migration.component.html'
})
export class PreMigrationComponent implements OnInit, OnDestroy {
  constructor(private visibilityService: ComponentVisibilityService) {}

  ngOnInit(): void {
    this.visibilityService.setHideProjectHeader(true);
  }

  ngOnDestroy(): void {
    this.visibilityService.setHideProjectHeader(false);
  }
}

Step 3: Subscribe to the Service in the Grandparent #

import { Component, OnInit } from '@angular/core';
import { ComponentVisibilityService } from '../path-to/component-visibility.service';

@Component({
  selector: 'app-project-details',
  templateUrl: './project-details.component.html'
})
export class ProjectDetailsComponent implements OnInit {
  hideHeaderContent = false;

  constructor(private visibilityService: ComponentVisibilityService) {}

  ngOnInit(): void {
    this.visibilityService.hideProjectHeader$.subscribe(hide => {
      this.hideHeaderContent = hide;
    });
  }
}

Your grandparent template uses the same *ngIf as Option 1.

Option 3: Add Route Data & Listen for Route Changes #

You can embed visibility instructions directly in your route configuration using the data property. This keeps routing-related state tied to the route itself, which is clean and declarative.

Step 1: Update the Route Configuration #

Add a hideProjectHeader flag to the grandchild route:

{ 
  path: 'premigration', 
  component: PreMigrationComponent, 
  canActivate: [AuthGuard],
  data: { hideProjectHeader: true } // Add this flag
}

Step 2: Listen for Route Data in the Grandparent #

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

@Component({
  selector: 'app-project-details',
  templateUrl: './project-details.component.html'
})
export class ProjectDetailsComponent implements OnInit {
  hideHeaderContent = false;

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map(() => {
        // Traverse the route tree to check for the data flag
        let currentRoute = this.router.routerState.root;
        while (currentRoute) {
          if (currentRoute.data?.['hideProjectHeader']) {
            return true;
          }
          currentRoute = currentRoute.firstChild;
        }
        return false;
      }),
      distinctUntilChanged()
    ).subscribe(hide => {
      this.hideHeaderContent = hide;
    });
  }
}

Again, use the same *ngIf in the grandparent template to control visibility.

Which Option Should You Choose? #

• Option 1 is straightforward if you only need this logic for this specific grandchild component.
• Option 2 is ideal if you need to manage visibility state across multiple components or routes.
• Option 3 is the most declarative approach, tying visibility directly to your route configuration—great for routing-centric state.

All of these avoid the messy event bubbling you were using before, keeping your code cleaner and easier to maintain.

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