Angular组件间通信策略：共享服务与ViewChild的应用

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

@Injectable({
  providedIn: 'root' // 声明服务在根模块提供，使其在整个应用中可注入
})
export class MainService {
  // 使用BehaviorSubject，它会记住最新的值，并在有新订阅者时立即发出
  // "111" 是初始默认值
  private messageSource = new BehaviorSubject<string>("111");

  // 提供一个Observable供其他组件订阅
  currentMessage: Observable<string> = this.messageSource.asObservable();

  constructor() { }

  // 发送消息的方法，更新BehaviorSubject的值
  sendMessage(message: string) {
    this.messageSource.next(message);
  }

  // 接收消息的方法，返回Observable供组件订阅
  receiveMessage(): Observable<string> {
    return this.messageSource.asObservable();
  }
}

// src/app/first/first.component.ts
import { Component, OnInit } from '@angular/core';
import { MainService } from '../services/main.service'; // 导入服务

@Component({
  selector: 'app-first',
  template: `<button (click)="clickMe()">点击发送消息</button>`
})
export class FirstComponent implements OnInit {
  constructor(private mainService: MainService) { } // 注入服务

  ngOnInit(): void {
    // 可以在这里订阅，但通常发送方不需要订阅自己的消息
  }

  clickMe() {
    // 调用服务的方法发送消息
    this.mainService.sendMessage("001");
    console.log("消息 '001' 已发送");
  }
}

// src/app/second/second.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MainService } from '../services/main.service'; // 导入服务
import { Subscription } from 'rxjs'; // 导入Subscription用于管理订阅

@Component({
  selector: 'app-second',
  template: `<p>接收到的消息：{{ receivedMessage }}</p>`
})
export class SecondComponent implements OnInit, OnDestroy {
  clickEventSubscription: Subscription;
  receivedMessage: string = '';

  constructor(private mainService: MainService) { } // 注入服务

  ngOnInit(): void {
    // 订阅服务中的消息流
    this.clickEventSubscription = this.mainService.receiveMessage().subscribe(message => {
      this.toggle(message); // 收到消息后调用处理函数
    });
  }

  public toggle(state: string) {
    this.receivedMessage = state;
    console.log(`在SecondComponent中收到消息: ${state}`);
  }

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

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

@Component({
  selector: 'app-first',
  template: `
    <button (click)="callChildMethod()">调用子组件方法</button>
    <app-second></app-second> <!-- 在父组件模板中嵌入子组件 -->
  `
})
export class FirstComponent implements OnInit, AfterViewInit {
  // 使用@ViewChild获取SecondComponent的实例
  // static: false 表示在ngAfterViewInit中解析，适用于子组件依赖于异步加载或条件渲染的情况
  @ViewChild(SecondComponent, { static: false }) secondChildView!: SecondComponent;

  constructor() { }

  ngOnInit(): void { }

  // 在视图初始化后才能确保子组件实例可用
  ngAfterViewInit(): void {
    // 可以在这里访问 secondChildView，例如：
    // console.log('子组件实例已加载:', this.secondChildView);
  }

  callChildMethod() {
    if (this.secondChildView) {
      // 直接调用子组件的toggle方法
      this.secondChildView.toggle('001');
      console.log("已通过@ViewChild调用子组件的toggle方法，并传入 '001'");
    } else {
      console.error("子组件实例尚未准备好！");
    }
  }
}

// src/app/second/second.component.ts (作为子组件)
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-second',
  template: `<p>子组件内部消息：{{ internalState }}</p>`
})
export class SecondComponent implements OnInit {
  public internalState: string = '默认状态';

  constructor() { }

  ngOnInit(): void { }

  // 这个方法将被父组件调用
  public toggle(state: string) {
    this.internalState = state;
    console.log(`在SecondComponent中，toggle方法被调用，状态更新为: ${state}`);
  }
}