Angular 4 + RxJs：组件间Observable传递（模态框场景）

嘿，我来帮你搞定这个Angular组件间传值的问题～首先先提下你现有代码里的两个小细节：

• Observable.of({"abc"}) 语法有点问题，应该是 Observable.of({ key: "abc" }) 这样的合法对象格式（如果是字符串可以直接写 Observable.of("abc")）
• @viewChild 要改成大写开头的 @ViewChild，Angular装饰器是大小写敏感的

接下来给你几种可行的方案，按推荐程度排序：

方案1：使用@Input输入属性（推荐，符合Angular最佳实践） #

这是组件间父子通信最标准的方式，单向数据流清晰易维护：

1. 子模态框组件（modalComponent）TS：
   添加@Input装饰器来接收父组件的Observable：

   import { Input } from '@angular/core';
   import { Observable } from 'rxjs';
   
   export class ModalComponent {
     @Input() data$: Observable<any>; // 用$结尾是RxJS惯例，标识这是Observable类型
   
     // 你可以在这里订阅处理，或者在模板里用async pipe直接渲染
     ngOnInit() {
       this.data$.subscribe(data => {
         console.log('从父组件拿到的数据：', data);
       });
     }
   }
   

2. 父组件HTML：
   给模态框组件绑定输入属性：

   <my-modal #modalID [data$]="a"></my-modal>
   

3. 父组件TS：
   修正Observable的定义：

   import { Observable } from 'rxjs';
   import { ViewChild } from '@angular/core';
   import { ModalComponent } from './modal.component';
   
   export class ParentComponent {
     private a = Observable.of({ key: "abc" }); // 修正后的合法Observable
     @ViewChild('modalID') private modalID: ModalComponent;
   }
   

这种方式下，只要父组件的Observable有新值，子组件就能自动接收到，非常省心。

方案2：通过ViewChild主动传递数据 #

如果需要在点击打开模态框的时机才传递数据（而不是一开始就绑定），可以用ViewChild直接调用子组件的方法或者赋值：

1. 子模态框组件TS：
   定义一个接收数据的方法或者属性：

   import { Observable } from 'rxjs';
   
   export class ModalComponent {
     private data$: Observable<any>;
   
     setDataObservable(obs: Observable<any>) {
       this.data$ = obs;
       // 在这里可以立即订阅处理数据
       this.data$.subscribe(data => {
         console.log('父组件传递过来的数据：', data);
       });
     }
   }
   

2. 父组件TS：
   在打开模态框的点击事件方法里调用子组件的方法：

   import { Observable } from 'rxjs';
   import { ViewChild } from '@angular/core';
   import { ModalComponent } from './modal.component';
   
   export class ParentComponent {
     private a = Observable.of({ key: "abc" });
     @ViewChild('modalID') private modalID: ModalComponent;
   
     openModal() {
       // 先执行打开模态框的逻辑（比如切换显示状态）
       // 同时传递Observable给子组件
       this.modalID.setDataObservable(this.a);
     }
   }
   

3. 父组件HTML：
   给按钮绑定打开方法：

   <button (click)="openModal()">打开模态框</button>
   <my-modal #modalID></my-modal>
   

方案3：使用共享服务（适合复杂场景） #

如果你的组件结构比较复杂，或者多个组件都需要共享这个Observable，可以创建一个共享服务：

1. 创建共享服务：

   import { Injectable } from '@angular/core';
   import { Observable } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class DataShareService {
     private data$: Observable<any>;
   
     setDataObservable(obs: Observable<any>) {
       this.data$ = obs;
     }
   
     getDataObservable(): Observable<any> {
       return this.data$;
     }
   }
   

2. 父组件TS：
   注入服务并设置Observable：

   import { Observable } from 'rxjs';
   import { DataShareService } from './data-share.service';
   
   export class ParentComponent {
     private a = Observable.of({ key: "abc" });
   
     constructor(private dataShareService: DataShareService) {}
   
     openModal() {
       this.dataShareService.setDataObservable(this.a);
       // 执行打开模态框的逻辑
     }
   }
   

3. 子模态框组件TS：
   注入服务并获取Observable：

   import { DataShareService } from './data-share.service';
   
   export class ModalComponent {
     constructor(private dataShareService: DataShareService) {}
   
     ngOnInit() {
       const data$ = this.dataShareService.getDataObservable();
       data$.subscribe(data => {
         console.log('从共享服务拿到的数据：', data);
       });
     }
   }
   

这个方案适合跨层级组件通信，但如果只是简单的父子组件，方案1就足够了。

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