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

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

@Injectable({
  providedIn: 'root' // 确保服务在应用根部可用
})
export class MainService implements OnDestroy {
  // BehaviorSubject初始化时会带有一个默认值 "111"
  private messageSource = new BehaviorSubject<string>("111");
  // 暴露一个Observable供组件订阅，避免直接操作BehaviorSubject
  currentMessage: Observable<string> = this.messageSource.asObservable();

  constructor() { }

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

  // 接收消息的方法（通过订阅currentMessage）
  // 示例中不再需要receiveMessage()方法，直接订阅currentMessage即可

  // 在服务销毁时清理资源（如果服务不是providedIn: 'root'且有特定生命周期）
  // 对于providedIn: 'root'的服务，通常不需要手动管理其生命周期，
  // 但对于更复杂的场景，例如内部有定时器或外部连接，仍需考虑清理。
  ngOnDestroy(): void {
    // 如果BehaviorSubject有完成或错误逻辑，可以在此处理
    // this.messageSource.complete();
  }
}

// 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 mainService: MainService) { }

  clickMe() {
    // 当按钮被点击时，发送新消息
    this.mainService.sendMessage("001");
  }
}

// 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>接收到的消息: {{ receivedMessage }}</p>
  `
})
export class SecondComponent implements OnInit, OnDestroy {
  private messageSubscription: Subscription;
  receivedMessage: string = '';

  constructor(private mainService: MainService) { }

  ngOnInit() {
    // 在组件初始化时订阅消息
    this.messageSubscription = this.mainService.currentMessage.subscribe(message => {
      this.toggle(message);
    });
  }

  public toggle(state: string) {
    console.log("接收到消息:", state);
    this.receivedMessage = state; // 更新组件内部状态
  }

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

// second.component.ts
import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() { }

  // 暴露给父组件调用的方法
  public toggle(state: string) {
    console.log("子组件收到父组件消息:", state);
    this.internalState = `父组件传来的: ${state}`;
  }
}

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

@Component({
  selector: 'app-first',
  template: `
    <button (click)="clickMe()">点击我调用子组件方法</button>
    <app-second></app-second> <!-- 在父组件模板中包含子组件 -->
  `
})
export class FirstComponent implements AfterViewInit {
  // 使用@ViewChild获取SecondComponent的实例
  // static: false 表示在ngAfterViewInit生命周期钩子中可用
  @ViewChild(SecondComponent, { static: false }) secondChildView!: SecondComponent;

  constructor() { }

  // @ViewChild引用的子组件在ngAfterViewInit生命周期钩子之后才可用
  ngAfterViewInit() {
    // 可以在这里进行初始化调用，或者确保secondChildView不为undefined
    // console.log('secondChildView:', this.secondChildView);
  }

  clickMe() {
    // 确保子组件实例已加载
    if (this.secondChildView) {
      this.secondChildView.toggle('001'); // 直接调用子组件的toggle方法
    } else {
      console.warn('SecondComponent实例尚未加载，无法调用方法。');
    }
  }
}