Angular 6：实现嵌套次级路由并获取子组件数据的方案

嘿，我来帮你搞定这个问题！你遇到的核心矛盾是路由加载组件时的实例隔离和跨组件状态同步的结合，其实Behavior Subject完全可以用，之前的失效大概率是路由配置或服务注入范围的问题，下面一步步来解决：

第一步：配置正确的嵌套辅助路由 #

要实现地址栏/(child:child/(secondarychild:secondarychild))的格式，需要在路由里设置嵌套的命名辅助路由，确保每个层级的router-outlet和路由配置对应：

1. 根路由配置 #

在app-routing.module.ts里定义嵌套的辅助路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChildComponent } from './child/child.component';
import { SecondaryChildComponent } from './secondary-child/secondary-child.component';

const routes: Routes = [
  {
    path: 'child',
    outlet: 'child', // 对应AppComponent里的命名outlet
    component: ChildComponent,
    children: [
      {
        path: 'secondarychild',
        outlet: 'secondarychild', // 对应ChildComponent里的命名outlet
        component: SecondaryChildComponent
      }
    ]
  }
];

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

2. 组件模板调整 #

• AppComponent模板：只保留命名router-outlet，去掉<app-child>组件选择器（路由会自动加载ChildComponent）：

<h1>Parent Component</h1>
<p>Secondary Child Message: {{ secondaryMessage }}</p>
<p>Form Valid Status: {{ isFormValid | async }}</p>
<router-outlet name="child"></router-outlet>

• ChildComponent模板：同样只保留它的命名router-outlet：

<h2>Child Component</h2>
<router-outlet name="secondarychild"></router-outlet>

第二步：用Behavior Subject实现状态同步 #

路由加载的组件和父组件没有直接的@Input/@Output绑定，所以用单例服务+Behavior Subject是最优方案，它能保存当前状态，新订阅的组件也能拿到最新值：

1. 创建状态服务 #

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

@Injectable({
  providedIn: 'root' // 确保服务是根级单例，所有组件共享同一个实例
})
export class SharedStateService {
  // 用于同步次级子组件的消息
  private secondaryMessageSubject = new BehaviorSubject<string>('');
  secondaryMessage$ = this.secondaryMessageSubject.asObservable();

  // 用于同步表单验证状态
  private formValidSubject = new BehaviorSubject<boolean>(false);
  formValid$ = this.formValidSubject.asObservable();

  updateSecondaryMessage(message: string) {
    this.secondaryMessageSubject.next(message);
  }

  updateFormValidStatus(isValid: boolean) {
    this.formValidSubject.next(isValid);
  }
}

2. 次级子组件发送状态 #

在SecondaryChildComponent里注入服务，发送消息和表单状态：

import { Component, OnInit } from '@angular/core';
import { SharedStateService } from '../shared-state.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-secondary-child',
  templateUrl: './secondary-child.component.html',
  styleUrls: ['./secondary-child.component.css']
})
export class SecondaryChildComponent implements OnInit {
  form: FormGroup;

  constructor(private stateService: SharedStateService, private fb: FormBuilder) {
    this.form = this.fb.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  ngOnInit(): void {
    // 发送初始消息
    this.stateService.updateSecondaryMessage('Hello from secondary child');

    // 监听表单验证状态变化
    this.form.statusChanges.subscribe(status => {
      const isValid = status === 'VALID';
      this.stateService.updateFormValidStatus(isValid);
    });
  }
}

3. 父组件订阅状态 #

在AppComponent里注入服务，订阅状态并显示：

import { Component } from '@angular/core';
import { SharedStateService } from './shared-state.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  secondaryMessage = '';
  isFormValid = this.stateService.formValid$;

  constructor(private stateService: SharedStateService, private router: Router) {
    // 订阅次级子组件的消息
    this.stateService.secondaryMessage$.subscribe(message => {
      this.secondaryMessage = message;
    });

    // 初始化导航到目标路由格式
    this.router.navigate([
      { outlets: { child: ['child', { outlets: { secondarychild: ['secondarychild'] }] } }
    ]);
  }
}

为什么之前的方案失效？ #

你之前用组件选择器时服务正常，换成路由就失效，大概率是这两个原因：

1. 重复创建组件实例：同时用组件选择器和路由加载组件，会生成两个不同的ChildComponent实例，它们注入的服务如果是组件级提供的，就不是同一个，导致状态无法同步。
2. 路由配置错误：没有正确设置嵌套的辅助路由，导致次级子组件没有被正确加载，自然无法发送状态。

替代方案的对比 #

• AJ2_82的方案：如果是指路由参数传递，那只适合一次性数据，不适合实时变化的表单状态。
• Host元数据属性绑定：需要组件有直接的父子嵌套关系，而路由加载的组件是动态的，没有直接的组件层级绑定，所以不适用。

综上，单例服务+Behavior Subject是最适合你的场景的方案，既能满足路由格式要求，又能实时同步跨组件状态。

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