如何从Angular中的另一个组件调用get API函数（组件彼此不相关）答案

【问题标题】：How to call a get API function from another component in Angular (Components are not related to each other )如何从Angular中的另一个组件调用get API函数（组件彼此不相关）
【发布时间】：2022-01-17 16:41:40
【问题描述】：

我有两个 angular 组件，它们彼此不相关 Component 1 和 Component 2 ，我已经定义了一个函数来调用组件 2 中的 get API，以便我可以在 Component 2 html 上显示 API 响应，但是我想要在我单击 Component 1 中的某个按钮后调用此函数。我尝试了共享服务方法，但它不起作用

1> 这是我的共享服务：

   private subject = new Subject<any>();

    sendClickEvent(){
      this.subject.next();
    }

    getClickEvent():Observable<any>{
      return this.subject.asObservable();
    }

2> 这是我与共享服务交互的 component1.ts 代码：

 callMe(){
    console.log("CALLLLLL MEEEEEEEEEEEEEEE")
     this.shared.sendClickEvent();
    console.log("CALLL MMMEEEE FINISHED")
    }

 ## Here I am calling this CallMe() function in Component1 ##
 <button  class="btn btn-danger" (click)="callMe()" </button>

3> 这是我的 component2.ts 代码，我通过共享服务订阅 & FetchCustomer() 是我将通过 CallMe() 调用的 get API 函数：

  clickEventSubscription : Subscription;

  constructor(private http : HttpClient,  private shared : SharedService) { 
   this.clickEventSubscription = this.shared.getClickEvent().subscribe(() => {
     console.log("Click Event subscription")
    this.FetchCustomer();
    })
  }

【问题讨论】：

标签： angular components angular-data sharedservices

【解决方案1】：

private bs = new BehaviorSubject<any>(null);

这就是你所需要的。您将需要处理 null 情况，因为主要区别之一是 BehaviorSubject (BS) 需要一个 init 值，但除此之外，BS 将在 component2 创建发生时发出最新值。

您现在面临的问题是，您发出时 component2 并不活跃，并且主题订阅者仅在订阅后才收到值，因此您错过了它。使用 BS，您将收到最新值的通知。

要跳过初始化值（这意味着没有发出任何值，您可以使用pipe(skipWhile(v => v == null)) 或if 条件。这取决于您是需要在点击后发送内容还是仅发送。

【讨论】：