Angular 组件间通信深度解析：共享服务与 @ViewChild 的应用

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

@Injectable({
  providedIn: 'root' // 确保服务在整个应用中是单例的
})
export class MainService {
  // BehaviorSubject 会在订阅时立即发出当前值（或初始值）
  // private messageSource = new BehaviorSubject<string>("111");

  // Subject 不会发出初始值，只会在有新值发出时通知订阅者
  private messageSource = new Subject<string>();

  /**
   * 发送消息
   * @param mess 要发送的字符串消息
   */
  sendMessage(mess: string): void {
    this.messageSource.next(mess);
  }

  /**
   * 接收消息的 Observable
   * @returns 消息的 Observable
   */
  receiveMessage(): Observable<string> {
    return this.messageSource.asObservable();
  }
}

// src/app/first/first.component.ts
import { Component } from '@angular/core';
import { MainService } from '../main.service';

@Component({
  selector: 'app-first',
  template: `
    <button (click)="clickMe()">点击我发送消息</button>
  `
})
export class FirstComponent {
  constructor(private service: MainService) {}

  clickMe(): void {
    this.service.sendMessage("001");
    console.log("消息 '001' 已发送。");
  }
}

// src/app/second/second.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MainService } from '../main.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-second',
  template: `
    <p>接收到的消息将显示在控制台。</p>
  `
})
export class SecondComponent implements OnInit, OnDestroy {
  private messageSubscription!: Subscription;

  constructor(private service: MainService) {}

  ngOnInit(): void {
    // 订阅消息
    this.messageSubscription = this.service.receiveMessage().subscribe(message => {
      this.toggle(message);
    });
  }

  public toggle(state: string): void {
    console.log("SecondComponent 收到消息:", state);
  }

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

// src/app/second/second.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-second',
  template: `
    <p>我是一个子组件。</p>
  `
})
export class SecondComponent {
  constructor() {}

  /**
   * 子组件的公共方法，用于接收父组件传递的状态
   * @param state 父组件传递的字符串状态
   */
  public toggle(state: string): void {
    console.log("SecondComponent 收到来自父组件的直接调用，状态:", state);
  }
}

// src/app/first/first.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { SecondComponent } from '../second/second.component'; // 导入子组件

@Component({
  selector: 'app-first',
  template: `
    <button (click)="clickMe()">点击我调用子组件方法</button>
    <app-second></app-second> <!-- 在父组件模板中嵌入子组件 -->
  `
})
export class FirstComponent implements AfterViewInit {
  // 使用 @ViewChild 获取 SecondComponent 的实例
  // static: true 表示在变更检测周期的第一次运行时解析查询
  // static: false (默认) 表示在视图初始化后解析查询 (适用于 ngIf/ngFor 动态添加的组件)
  @ViewChild(SecondComponent, { static: false }) secondChildView!: SecondComponent;

  constructor() {}

  ngAfterViewInit(): void {
    // 确保 secondChildView 在这里已经可用
    // console.log("SecondChildView:", this.secondChildView);
  }

  clickMe(): void {
    if (this.secondChildView) {
      this.secondChildView.toggle('001'); // 直接调用子组件的 toggle 方法
      console.log("已通过 @ViewChild 调用子组件方法并传递 '001'。");
    } else {
      console.error("SecondComponent 实例未找到，可能视图尚未初始化。");
    }
  }
}