0

我有两个 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();
    })
  }
4

1 回答 1

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

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

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

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

于 2022-01-17T17:01:08.620 回答