Angular 4：如何从父组件向子模块传递值

嘿，我来帮你搞定从AdminLayout父组件向懒加载的Dashboard子模块传值的问题～结合你的项目结构和路由配置，这里有几种实用的实现方式，你可以根据场景选择：

适合传递固定的初始化配置类的值，步骤如下：

1. 先修正你的app.routing.ts路由路径（子路由不要加开头的/，否则会路由失效），同时添加data字段：

export const AppRoutes: Routes = [{
  path: '',
  component: AdminLayoutComponent,
  children: [
    {
      path: 'dashboard',
      loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
      data: { parentMsg: '来自AdminLayout的初始配置值' } // 这里存放要传递的值
    }
  ]
}]

2. 在dashboard.component.ts中通过ActivatedRoute获取该值：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  receivedValue: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 一次性获取静态值
    this.receivedValue = this.route.snapshot.data['parentMsg'];
    // 如果值可能动态更新，用subscribe监听变化
    this.route.data.subscribe(data => {
      this.receivedValue = data['parentMsg'];
    });
  }
}

如果需要传递的值会动态变化（比如AdminLayout里的用户状态、切换的主题配置），用共享服务是最优解：

1. 创建一个全局共享服务，比如DataSharingService：

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

@Injectable({
  providedIn: 'root' // 全局单例注入，确保父组件和子组件用的是同一个实例
})
export class DataSharingService {
  // 用BehaviorSubject保存值，支持订阅和动态更新
  private parentValue$ = new BehaviorSubject<string>('默认初始值');
  // 暴露可观察对象，供子组件订阅
  public sharedValue$ = this.parentValue$.asObservable();

  // 提供更新值的方法，让父组件调用
  updateSharedValue(newValue: string): void {
    this.parentValue$.next(newValue);
  }
}

2. 在admin-layout.component.ts中注入服务并更新值：

import { Component } from '@angular/core';
import { DataSharingService } from './data-sharing.service';

@Component({
  selector: 'app-admin-layout',
  templateUrl: './admin-layout.component.html',
  styleUrls: ['./admin-layout.component.css']
})
export class AdminLayoutComponent {
  constructor(private dataService: DataSharingService) {}

  // 比如在按钮点击或其他事件触发时传递值
  sendToDashboard(): void {
    this.dataService.updateSharedValue('AdminLayout传来的动态更新值');
  }
}

3. 在dashboard.component.ts中订阅值的变化：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataSharingService } from '../data-sharing.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit, OnDestroy {
  receivedValue: string;
  private valueSubscription: Subscription;

  constructor(private dataService: DataSharingService) { }

  ngOnInit(): void {
    // 订阅值的变化，实时接收更新
    this.valueSubscription = this.dataService.sharedValue$.subscribe(value => {
      this.receivedValue = value;
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.valueSubscription) {
      this.valueSubscription.unsubscribe();
    }
  }
}

如果值需要在URL中体现（比如ID、分类标识这类参数），可以用路由参数：

1. 修改app.routing.ts的Dashboard路由，定义参数占位符：

export const AppRoutes: Routes = [{
  path: '',
  component: AdminLayoutComponent,
  children: [
    {
      path: 'dashboard/:paramId', // 定义路径参数
      loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
    }
  ]
}]

2. 在admin-layout.component.ts中导航时传递参数：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-admin-layout',
  templateUrl: './admin-layout.component.html',
  styleUrls: ['./admin-layout.component.css']
})
export class AdminLayoutComponent {
  constructor(private router: Router) {}

  goToDashboard(): void {
    const targetParam = '123'; // 要传递的参数值
    this.router.navigate(['/dashboard', targetParam]);
    // 也可以用queryParams传递可选参数：
    // this.router.navigate(['/dashboard'], { queryParams: { type: 'admin' } });
  }
}

3. 在dashboard.component.ts中获取参数：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  paramValue: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 一次性获取参数
    this.paramValue = this.route.snapshot.paramMap.get('paramId');
    // 如果路由复用（比如同一个组件切换不同参数），监听参数变化
    this.route.paramMap.subscribe(params => {
      this.paramValue = params.get('paramId');
    });

    // 如果是queryParams，这么获取：
    // this.route.queryParamMap.subscribe(params => {
    //   this.paramValue = params.get('type');
    // });
  }
}

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