Angular2/4技术问题：如何获取router-outlet内组件OnInit后的数据渲染至导航栏

嘿，这个问题在Angular开发里挺常见的，我给你几个实用的解决方案，你可以根据自己的业务场景来选：

方案一：使用共享服务（最推荐，灵活低耦合） #

通过一个单例共享服务来传递路由组件的数据，这是Angular里组件间通信的标准做法之一。

步骤1：创建共享服务 #

用BehaviorSubject来保存数据（它能保留当前最新值，新订阅的组件也能直接拿到最新数据）：

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

@Injectable({ providedIn: 'root' }) // 标记为单例服务
export class DataShareService {
  // 初始化默认值为null
  private componentData$ = new BehaviorSubject<any>(null);
  // 对外暴露可观察对象，防止外部直接修改数据源
  public currentComponentData$ = this.componentData$.asObservable();

  // 提供更新数据的方法
  updateComponentData(data: any) {
    this.componentData$.next(data);
  }
}

步骤2：在路由组件的OnInit中更新数据 #

当路由组件获取到数据后，调用共享服务的方法推送数据：

import { Component, OnInit } from '@angular/core';
import { DataShareService } from '../data-share.service';

@Component({
  selector: 'app-target-route',
  templateUrl: './target-route.component.html'
})
export class TargetRouteComponent implements OnInit {
  constructor(private dataShareService: DataShareService) {}

  ngOnInit() {
    // 模拟从接口或其他地方获取数据
    const fetchedData = { 
      navbarTitle: '用户列表页',
      userCount: 24
    };
    // 把数据推送到共享服务
    this.dataShareService.updateComponentData(fetchedData);
  }
}

步骤3：在Navbar组件中订阅数据并渲染 #

在Navbar里监听共享服务的数据流，拿到数据后更新视图：

import { Component, OnInit } from '@angular/core';
import { DataShareService } from '../data-share.service';
import { AsyncPipe } from '@angular/common';

@Component({
  selector: 'app-navbar',
  template: `
    <nav class="navbar">
      <h2>{{ (currentComponentData$ | async)?.navbarTitle }}</h2>
      <span *ngIf="(currentComponentData$ | async)?.userCount">
        总计用户：{{ (currentComponentData$ | async)?.userCount }}
      </span>
    </nav>
  `,
  imports: [AsyncPipe]
})
export class NavbarComponent implements OnInit {
  // 直接使用服务的可观察对象，配合async管道自动处理订阅/取消订阅
  currentComponentData$ = this.dataShareService.currentComponentData$;

  constructor(private dataShareService: DataShareService) {}

  ngOnInit() {}
}

这里用async管道的好处是不用手动写ngOnDestroy取消订阅，Angular会自动处理，避免内存泄漏。

方案二：通过路由事件获取组件实例（适合简单场景） #

如果你的路由组件有公开的数据属性，可以监听路由激活事件，直接获取组件实例并读取数据：

步骤1：在主组件中监听路由事件 #

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

@Component({
  selector: 'app-main',
  template: `
    <div class="main-panel">
      <app-navbar 
        [componentData]="currentData"
        [style.display]="!authenticationService.isAuthenticated() ? 'none' : ''"
      ></app-navbar>
      <router-outlet></router-outlet>
    </div>
  `
})
export class MainComponent {
  currentData: any;

  constructor(private router: Router) {
    this.router.events.pipe(
      // 只监听路由激活完成的事件
      filter(event => event instanceof ActivationEnd),
      map((event: ActivationEnd) => event.snapshot.component)
    ).subscribe(componentInstance => {
      // 读取路由组件的公开数据属性
      if (componentInstance && (componentInstance as any).pageData) {
        this.currentData = (componentInstance as any).pageData;
      }
    });
  }
}

步骤2：路由组件中定义公开数据属性 #

export class TargetRouteComponent implements OnInit {
  // 公开属性，让主组件能读取
  pageData: any;

  ngOnInit() {
    this.pageData = { navbarTitle: '订单详情页' };
  }
}

步骤3：Navbar通过输入属性接收数据 #

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-navbar',
  template: `
    <nav>
      <h2>{{ componentData?.navbarTitle }}</h2>
    </nav>
  `
})
export class NavbarComponent {
  @Input() componentData: any;
}

这种方式耦合度稍高，依赖路由组件的公开属性，适合简单的小型项目。

方案三：利用路由的data配置（适合路由关联的静态/预加载数据） #

如果数据和路由强绑定，或者可以在路由守卫中预加载，可以直接配置路由的data字段：

步骤1：配置路由数据（静态或动态） #

const routes: Routes = [
  {
    path: 'user',
    component: UserComponent,
    // 静态数据
    data: { navbarTitle: '用户管理' }
  },
  {
    path: 'order/:id',
    component: OrderDetailComponent,
    canActivate: [OrderGuard], // 通过守卫加载动态数据
    data: {}
  }
];

步骤2：在路由守卫中加载动态数据 #

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { OrderService } from './order.service';

@Injectable({ providedIn: 'root' })
export class OrderGuard implements CanActivate {
  constructor(private orderService: OrderService) {}

  async canActivate(route: ActivatedRouteSnapshot) {
    const orderId = route.params['id'];
    // 从接口获取订单数据
    const orderData = await this.orderService.getOrderDetail(orderId).toPromise();
    // 把数据存入路由的data中
    route.data.navbarData = { 
      title: `订单${orderId}详情`,
      status: orderData.status
    };
    return true;
  }
}

步骤3：Navbar中读取路由data #

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

@Component({
  selector: 'app-navbar',
  template: `
    <nav>
      <h2>{{ navbarData?.title }}</h2>
      <span *ngIf="navbarData?.status">状态：{{ navbarData.status }}</span>
    </nav>
  `
})
export class NavbarComponent implements OnInit {
  navbarData: any;

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.data.subscribe(data => {
      this.navbarData = data.navbarData;
    });
  }
}

内容的提问来源于stack exchange，提问作者Serhio g. Lazin