Angular 4组件间数据传递：除@Input()与@Output()外是否有替代方案？

当然有啦！在Angular 4里，除了@Input()和@Output()这对最常用的父子组件通信组合，还有不少场景化的方案能满足不同组件间的数据传递需求，我给你梳理几个实用的：

1. 共享服务（Shared Service） #

这是跨组件（尤其是非父子关系）传递数据的首选方案之一。你可以创建一个注入到根模块的服务，借助RxJS的Subject或BehaviorSubject作为数据的“中转站”，组件通过订阅这个主题就能实时获取数据更新。

举个简单的实现例子：

// data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {
  // 用BehaviorSubject可以保存当前值，新订阅者能直接拿到最新数据
  private messageSource = new BehaviorSubject<string>('默认消息');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  updateMessage(message: string) {
    this.messageSource.next(message);
  }
}

发送数据的组件：

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-sender',
  template: `<button (click)="sendMsg()">发送消息给Receiver</button>`
})
export class SenderComponent {
  constructor(private dataService: DataService) { }

  sendMsg() {
    this.dataService.updateMessage('来自Sender的新消息！');
  }
}

接收数据的组件：

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

@Component({
  selector: 'app-receiver',
  template: `<p>收到的消息：{{ receivedMsg }}</p>`
})
export class ReceiverComponent implements OnInit {
  receivedMsg: string;

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.currentMessage.subscribe(msg => {
      this.receivedMsg = msg;
    });
  }
}

适用场景：兄弟组件、跨层级组件、任意无直接关联的组件间传递数据。

2. 路由参数（Route Parameters） #

如果组件是通过路由跳转关联的，那可以利用路由传递数据，主要分三种方式：

• URL路径参数：适合传递必填的标识性数据（比如商品ID）
• 查询参数：适合传递可选的额外数据
• 路由状态数据：适合传递不想暴露在URL里的私密数据

例子：
发送方跳转时传递参数：

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

constructor(private router: Router) {}

goToDetail() {
  // 路径参数方式
  this.router.navigate(['/product-detail', 1001]);
  // 查询参数方式
  this.router.navigate(['/product-detail'], { queryParams: { id: 1001, name: 'Angular Book' } });
  // 路由状态方式（不会显示在URL）
  this.router.navigate(['/product-detail'], { state: { data: { price: 59 } } });
}

接收方获取参数：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 获取路径参数
  this.route.paramMap.subscribe(params => {
    const productId = params.get('id');
  });
  // 获取查询参数
  this.route.queryParamMap.subscribe(params => {
    const productName = params.get('name');
  });
  // 获取路由状态数据
  const productPrice = window.history.state.data?.price;
}

适用场景：通过路由跳转的页面级组件间传递数据。

3. ViewChild/ContentChild #

如果是父子组件，且父组件需要主动访问子组件的属性或调用子组件方法，那可以用ViewChild（访问模板内的子组件）或ContentChild（访问投影内容里的组件）。

例子：
子组件：

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

@Component({
  selector: 'app-child',
  template: `<p>{{ childInfo }}</p>`
})
export class ChildComponent {
  childInfo = '我是子组件的信息';

  greetParent() {
    console.log('父组件调用了我的方法！');
  }
}

父组件：

import { Component, ViewChild, OnInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`
})
export class ParentComponent implements OnInit {
  @ViewChild(ChildComponent) childComp: ChildComponent;

  ngOnInit() {
    // 直接获取子组件属性
    console.log(this.childComp.childInfo);
    // 调用子组件方法
    this.childComp.greetParent();
  }
}

适用场景：父组件需要主动操控子组件的父子通信场景。

4. 本地存储/会话存储（LocalStorage/SessionStorage） #

如果数据需要持久化保存，或者跨标签页传递，浏览器的本地存储是个不错的选择。注意存储的是字符串类型，需要用JSON.stringify和JSON.parse处理对象。

例子：

// 存储数据
localStorage.setItem('userProfile', JSON.stringify({ name: 'Rishi', role: 'Developer' }));

// 获取数据
const user = JSON.parse(localStorage.getItem('userProfile'));

适用场景：需要持久化的用户配置、跨标签页共享数据等场景。

5. NgRx状态管理（适合复杂应用） #

如果你的应用规模较大，存在大量跨组件共享的状态（比如购物车、用户全局信息），可以用NgRx（Angular的Redux实现）来统一管理应用状态。通过Store存储数据，组件通过dispatch action修改状态，通过select订阅状态变化。

不过要注意，Angular 4对应的NgRx版本是@ngrx/store@4.x，用法和后续版本略有差异，但核心思路一致。
适用场景：中大型应用的全局状态共享场景。

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