离子4观测值

Question

我一直试图在Ionic 4升级项目中实现rxjs可观察模式，但没有成功，我想知道如何成功地实现可观察性，以便在屏幕上显示预期的结果。

--这是一种旧的做事方式，在某个地方，“user:loggedIn”用于在屏幕上显示x结果。

 events.subscribe('user:loggedIn', (userEventData) => {
   this.getUserInfo(userEventData);
   this.registerPushNotifications();
   this.registerPushNotificationHandlers();
 });

实现和测试两种方法，但没有显示结果。

方法1:

    let userLoggedIn = new Observable((observer) => {
      // const {next, error} = observer;

      observer.next({'user:loggedIn':observer});
      observer.complete();
    });

    userLoggedIn.subscribe((userEventData) => {
      console.log(userEventData)
      this.getUserInfo(userEventData);
      this.registerPushNotifications();
      this.registerPushNotificationHandlers();
    });

方法2:

    var observer: Observable<any> = of();
    observer.subscribe(userEventData => {
      this.getUserInfo(userEventData);
      this.registerPushNotifications();
      this.registerPushNotificationHandlers();
    });

是否有一种方法可以使用可观察的或主题的实现来具有与Ionic 4中的旧Ionic事件功能相同的功能？

Answer 1

这里有一个可能对你有用的方法。在您的auth服务中，您可以创建一个私有BehaviorSubject属性来存储私有登录属性的最后一个值。然后，您可以创建一个以BehaviorSubject为源的可观察到的公共信息。最后，您可以订阅服务的可在页面/组件中观察到的公共服务，当登录属性状态发生更改时，可以获取和设置所需的任何内容。下面是一个简单的例子，说明它如何工作：

loginService.ts

export class LoginService {
  private login: boolean = false;
  private loginSubject$ = new BehaviorSubject<boolean>(this.login);
  loginChanged$ = this.loginSubject$.asObservable();

  constructor() { }

  updateLogin(){
    this.login = !this.login;
    this.loginSubject$.next(this.login);
  }
}

home.page.ts

export class HomePage implements OnInit, OnDestroy {

  timesClicked:number=0;
  loginButtonText:string;

  loginChangedSubscription: Subscription

  constructor(private loginService: LoginService) {}

  ngOnInit() {
    this.loginChangedSubscription = this.loginService.loginChanged$.subscribe((loginValue)=>{
      this.timesClicked += 1;
      this.loginButtonText =  (loginValue ? "Log Me Out" : "Log Me In");
    })
  }

  ngOnDestroy(): void {
    if (this.loginChangedSubscription) {
      this.loginChangedSubscription.unsubscribe();
    }
  }

  updateLogin():void{
    this.loginService.updateLogin();
  }
}

只是为了证明它起作用..。home.page.html

<ion-content>
  <ion-item>
    <ion-label>
      {{timesClicked}}
    </ion-label>
  </ion-item>
  <ion-button color="primary" (click)="updateLogin()">{{loginButtonText}}</ion-button>
</ion-content>

希望这能有所帮助。