时间戳

首页 > 解决方案 > 从没有视图的组件中触发自定义事件

angular - 从没有视图的组件中触发自定义事件

问题描述

我希望能够触发其他组件可以订阅的自定义事件，我读到的并不是我真正想要的，我不希望 html 元素上的任何视图或用户交互来触发我的事件。

如果我有一个带有注销方法的组件：

logout() : void {
    // change local storage state

    // fire event so other components can update
}

我希望此方法触发其他组件可以订阅的自定义事件，以便他们知道对注销做出反应。

所以另一个组件可能有一个方法：

something() : void{

    // subscribe the event here and perform some local action, like changing a login state variable
}

我敢肯定，当我使用 Ionic 而不是纯 Angular 时，我已经这样做了……

标签： angular

解决方案

我相信 Angular 中这种模式的最佳方法是使用服务公开 Observable。类似于（例如，在 AuthenticationService 中）：

private loginStatusSource$ = new BehaviorSubject();

public loginStatus$ = this.loginStatusSource$.asObservable();

...

logout() : void {
    // change local storage state

   this.loginStatusSource$.next(false);
}

getLoginStatus(): Observable<boolean> {
  return this.loginStatus$;
}

然后在您的组件中：

public loginStatus$: Observable<boolean>;

constructor(private authService: AuthenticationService) {
  this.loginStatus$ = this.authService.getLoginStatus();
}

something() : void{
  this.loginStatus$.subscribe(status => {
    // perform some local action...
  });
}

请注意，这是一个简化的示例，您可能想要存储的不仅仅是布尔值，例如您的用户数据和类似的东西。可以使用NGRX 或Akita等状态管理工具，但这是我使用的更简单、不需要额外依赖项的方法。

推荐阅读