Angular 4+常用组件共享及路由场景组件复用最佳实践咨询

嘿，这个场景我太熟悉了！我平时做Angular项目的时候，也经常遇到路由组件需要和根模板里的Header、模态框这些组件交互的需求，结合Angular的特性，给你梳理几个最实用的方案：

1. 服务（Service）+ RxJS Subject：跨组件通信的首选 #

这是Angular里最常用的跨组件通信方式，因为服务是根注入器单例的，所有组件都能共享同一个实例，完美适配你的场景。

举个模态框的实际例子：

• 先创建一个SharedUIService，用RxJS的BehaviorSubject来管理模态框的状态：

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

@Injectable({ providedIn: 'root' })
export class SharedUIService {
  private modalVisible$ = new BehaviorSubject<boolean>(false);
  modalVisibleObs$ = this.modalVisible$.asObservable();

  openModal() {
    this.modalVisible$.next(true);
  }

  closeModal() {
    this.modalVisible$.next(false);
  }
}

• 在根组件（AppComponent）里订阅这个状态，控制模态框的显示：

import { Component } from '@angular/core';
import { SharedUIService } from './shared-ui.service';

@Component({
  template: `
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
    <app-modal *ngIf="isModalVisible"></app-modal>
  `
})
export class AppComponent {
  isModalVisible = false;

  constructor(private uiService: SharedUIService) {
    this.uiService.modalVisibleObs$.subscribe(visible => {
      this.isModalVisible = visible;
    });
  }
}

• 任何路由组件想要打开模态框，只要注入这个服务调用方法就行：

import { Component } from '@angular/core';
import { SharedUIService } from '../shared-ui.service';

@Component({ template: `<button (click)="openModal()">打开模态框</button>` })
export class AnyRouteComponent {
  constructor(private uiService: SharedUIService) {}

  openModal() {
    this.uiService.openModal();
  }
}

这种方式不仅适用于模态框，更新Header的用户信息、导航栏的选中状态等场景都能用，完全解耦了组件之间的依赖。

2. @ViewChild + 依赖注入：直接调用根组件实例方法 #

如果路由组件需要直接调用根模板里组件的特定方法（比如让Header显示一个临时通知），可以用@ViewChild获取组件实例，再通过服务传递或者直接注入。

比如：

• 在AppComponent里获取Header的实例，然后把它提供给根注入器：

import { Component, ViewChild, OnInit } from '@angular/core';
import { HeaderComponent } from './header.component';
import { InjectionToken } from '@angular/core';

export const HEADER_INSTANCE = new InjectionToken<HeaderComponent>('HeaderInstance');

@Component({
  template: `
    <app-header #header></app-header>
    <router-outlet></router-outlet>
  `,
  providers: [{
    provide: HEADER_INSTANCE,
    useFactory: (component: AppComponent) => component.header,
    deps: [AppComponent]
  }]
})
export class AppComponent implements OnInit {
  @ViewChild('header') header!: HeaderComponent;
}

• 然后在路由组件里注入这个实例，直接调用方法：

import { Component, Inject } from '@angular/core';
import { HEADER_INSTANCE, HeaderComponent } from '../app.component';

@Component({ template: `<button (click)="showNotification()">显示通知</button>` })
export class RouteComponent {
  constructor(@Inject(HEADER_INSTANCE) private header: HeaderComponent) {}

  showNotification() {
    this.header.showTempNotification('路由组件发来的通知！');
  }
}

这种方式适合需要直接操作组件实例的场景，但要注意确保组件实例已经初始化（比如在ngAfterViewInit之后使用）。

3. @Output 事件：路由组件主动通知根组件 #

如果路由组件只需要向根组件传递简单的事件（比如触发导航栏刷新），可以用Angular的@Output装饰器。

因为router-outlet加载的组件是AppComponent的子组件，你可以通过router-outlet的activate事件获取当前路由组件的实例，然后监听它的输出事件：

// 路由组件里定义输出事件
import { Component, Output, EventEmitter } from '@angular/core';

@Component({ template: `...` })
export class RouteComponent {
  @Output() refreshNavbar = new EventEmitter<void>();

  onSomeAction() {
    this.refreshNavbar.emit();
  }
}

// AppComponent里监听事件
import { Component, ViewChild } from '@angular/core';
import { NavbarComponent } from './navbar.component';

@Component({
  template: `
    <app-navbar #navbar></app-navbar>
    <router-outlet (activate)="onRouteActivate($event)"></router-outlet>
  `
})
export class AppComponent {
  @ViewChild('navbar') navbar!: NavbarComponent;

  onRouteActivate(component: any) {
    if (component.refreshNavbar) {
      component.refreshNavbar.subscribe(() => {
        this.navbar.refresh();
      });
    }
  }
}

这种方式比较轻量化，适合简单的事件通知场景。

4. 避坑提醒：别直接操作DOM！ #

最后一定要说一句：千万不要用document.getElementById或者jQuery之类的方式直接操作根模板里的组件，这完全违背了Angular的组件化思想，会导致代码难以维护，还容易出现生命周期相关的bug。

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