Angular组件间通信策略：共享服务与@ViewChild实践指南

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() { }

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

  /**
   * 接收消息的方法（实际上是返回可观察对象供订阅）
   * @returns Observable<string> 消息的可观察对象
   */
  receiveMessage(): Observable<string> {
    return this.messageSource.asObservable();
  }
}

import { Component, OnInit } from '@angular/core';
import { MainService } from '../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('FirstComponent: 消息 "001" 已发送');
  }
}

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 {
  clickEventSubscription: Subscription;
  receivedMessage: string = ''; // 用于在模板中显示接收到的消息

  constructor(private mainService: MainService) { }

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

  /**
   * 处理接收到的消息
   * @param state 接收到的字符串消息
   */
  public toggle(state: string) {
    console.log('SecondComponent: 接收到消息:', state);
    this.receivedMessage = state; // 更新组件属性以在模板中显示
  }

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

import { Component, OnInit, 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 OnInit, AfterViewInit {
  // 使用 @ViewChild 引用子组件实例
  // 'secondChildView' 是父组件中的属性名
  // 'SecondComponent' 是子组件的类名
  @ViewChild(SecondComponent) secondChildView!: SecondComponent;

  constructor() { }

  ngOnInit(): void {
    // 初始化逻辑
  }

  ngAfterViewInit(): void {
    // @ViewChild 引用在 ngAfterViewInit 生命周期钩子之后才可用
    // 在这里可以进行一些初始的子组件操作，但对于点击事件触发的，直接在事件处理函数中调用即可
    if (this.secondChildView) {
      console.log('子组件实例已准备好:', this.secondChildView);
    }
  }

  /**
   * 按钮点击事件，直接调用子组件的 toggle 方法
   */
  clickMe() {
    if (this.secondChildView) {
      this.secondChildView.toggle('001'); // 直接调用子组件的 toggle 方法并传递参数
      console.log('FirstComponent: 已通过 @ViewChild 调用 SecondComponent 的 toggle 方法');
    } else {
      console.error('SecondComponent 实例未找到！');
    }
  }
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-second',
  template: `
    <p>子组件接收到的状态: {{ receivedState }}</p>
  `,
  // ... 其他配置
})
export class SecondComponent implements OnInit {
  receivedState: string = '';

  constructor() { }

  ngOnInit(): void {
    // 初始化逻辑
  }

  /**
   * 子组件暴露给父组件调用的方法
   * @param state 父组件传递的字符串状态
   */
  public toggle(state: string) {
    console.log('SecondComponent: toggle 方法被调用，接收到状态:', state);
    this.receivedState = state; // 更新属性以在模板中显示
  }
}