Angular 5：Subject生成的Observable无法赋值给变量问题

嘿，我来帮你搞定这个Angular组件间传值的问题！你遇到的[object Object]显示问题，本质上要么是模板绑定没访问对象属性，要么是数据传递/订阅环节没处理到位，咱们一步步拆解解决：

如果你的selectedContact是一个对象，直接在模板里写{{selectedContact}}，浏览器会默认把对象转成字符串输出，也就是[object Object]。你得明确访问对象的具体属性才行，比如：

<!-- ❌ 错误写法 -->
<p>选中的联系人：{{selectedContact}}</p>

<!-- ✅ 正确写法（假设对象有name、email属性） -->
<p>姓名：{{selectedContact?.name}}</p>
<p>邮箱：{{selectedContact?.email}}</p>

这里的?.是可选链操作符，能避免对象还未初始化时出现控制台报错。

如果你的Service用的是普通Subject，接收组件要是在发送事件之后才订阅，就会错过数据。推荐用BehaviorSubject，它会缓存最新的值，新订阅的组件能立刻拿到当前数据：

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

@Injectable({ providedIn: 'root' })
export class ContactService {
  // 初始化一个默认值（比如空对象）
  private selectedContactSource = new BehaviorSubject<any>({});
  // 对外暴露只读的Observable
  selectedContact$ = this.selectedContactSource.asObservable();

  // 发送数据的方法
  setSelectedContact(contact: any) {
    this.selectedContactSource.next(contact);
    console.log('待传递的联系人对象：', contact); // 这里可以确认数据是否正确
  }
}

方式一：手动订阅（记得清理订阅防止内存泄漏） #

在接收数据的组件里，手动订阅Observable并赋值给变量，同时要在组件销毁时取消订阅：

// 接收组件 receiver.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ContactService } from './contact.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-receiver',
  templateUrl: './receiver.component.html'
})
export class ReceiverComponent implements OnInit, OnDestroy {
  selectedContact: any;
  private subscription!: Subscription;

  constructor(private contactService: ContactService) {}

  ngOnInit() {
    this.subscription = this.contactService.selectedContact$.subscribe(contact => {
      this.selectedContact = contact;
      console.log('收到的联系人对象：', this.selectedContact); // 确认赋值是否正确
    });
  }

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

方式二：用Async Pipe（更简洁，自动管理订阅） #

Angular的async管道会自动帮你完成订阅和取消订阅的操作，不用手动处理内存问题，直接在模板里使用即可：

// 接收组件 receiver.component.ts
import { Component } from '@angular/core';
import { ContactService } from './contact.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-receiver',
  templateUrl: './receiver.component.html'
})
export class ReceiverComponent {
  // 直接把Observable暴露给模板
  selectedContact$ = this.contactService.selectedContact$;

  constructor(private contactService: ContactService) {}
}

对应的模板写法（推荐用ng-container避免多次订阅）：

<ng-container *ngIf="selectedContact$ | async as contact">
  <p>姓名：{{contact.name}}</p>
  <p>邮箱：{{contact.email}}</p>
</ng-container>

要保证发送组件调用Service方法时，确实传递了正确的对象：

// 发送组件 sender.component.ts
import { Component } from '@angular/core';
import { ContactService } from './contact.service';

@Component({
  selector: 'app-sender',
  template: `
    <button *ngFor="let contact of contacts" (click)="selectContact(contact)">
      选择{{contact.name}}
    </button>
  `
})
export class SenderComponent {
  contacts = [
    { id: 1, name: '张三', email: 'zhangsan@example.com' },
    { id: 2, name: '李四', email: 'lisi@example.com' }
  ];

  constructor(private contactService: ContactService) {}

  selectContact(contact: any) {
    this.contactService.setSelectedContact(contact);
  }
}

按照上面的步骤调整后，应该就能正常显示对象的具体属性，而不是[object Object]啦！

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