点击父组件按钮时触发执行子组件独立函数的实现问题咨询

根据两个组件的层级关系，可选择以下3种常用实现方式： #

方案1：父子组件用@ViewChild直接调用 #

如果两个组件是父子关系（组件2是组件1的直接子组件），直接通过模板引用获取子组件实例调用即可：

1. 父组件（组件1）的HTML中给子组件加模板引用标识：

<app-component2 #component2Ref></app-component2>

2. 组件1的TS代码中注入子组件实例：

import { ViewChild } from '@angular/core';
import { Component2Component } from './component2.component';

// 类内部
@ViewChild('component2Ref') component2: Component2Component;

// 原有editRequest函数末尾添加调用逻辑
editRequest(resource) {
  // 你原有逻辑，比如存储resource到localStorage
  localStorage.setItem("requestId", JSON.stringify(resource));
  // 新增：直接调用组件2的方法
  this.component2.EditValues();
}

方案2：兄弟/无层级关系组件用共享服务通信 #

如果两个组件没有直接父子层级，通过全局共享服务做消息中转是最通用的方案：

1. 新建共享服务shared.service.ts：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  // 定义通知流
  private editRequested = new Subject<void>();
  editRequested$ = this.editRequested.asObservable();

  // 发送通知的方法
  triggerEdit() {
    this.editRequested.next();
  }
}

2. 组件1的TS中注入服务，在editRequest执行完成后发送通知：

import { SharedService } from './shared.service';

constructor(private sharedService: SharedService) {}

editRequest(resource) {
  // 原有逻辑
  localStorage.setItem("requestId", JSON.stringify(resource));
  // 新增：发送触发通知
  this.sharedService.triggerEdit();
}

3. 组件2的TS中注入服务，订阅通知触发自身方法：

import { SharedService } from './shared.service';
import { Subscription } from 'rxjs';

private editSub: Subscription;

constructor(private sharedService: SharedService) {}

ngOnInit() {
  // 订阅触发通知
  this.editSub = this.sharedService.editRequested$.subscribe(() => {
    this.EditValues();
  })
}

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

方案3：监听localStorage变更（仅多标签页场景适用） #

如果你需要跨浏览器标签页触发，可监听storage事件，但注意同一页面内修改localStorage不会触发当前页面的storage事件，因此同页面场景不推荐使用：

// 组件2的ngOnInit中添加监听
ngOnInit() {
  window.addEventListener('storage', (e) => {
    if(e.key === 'requestId') {
      this.EditValues();
    }
  })
}

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