Иони c 4 Наблюдаемые - PullRequest
Новая
       9

Иони c 4 Наблюдаемые

0 голосов
/ 04 февраля 2020

Я пытался реализовать шаблон rx js Observable в проекте обновления Ioni c 4, но безуспешно, и я хотел бы знать, как успешно реализовать Observable, чтобы ожидаемый результат отображался на экране. .

Это старый способ работы, и где-то '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();
    });

Есть ли способ использовать ту же функциональность, что и старая функциональность событий Ioni c в Ioni c 4, используя реализации Observable или Subject?

1 Ответ

2 голосов
/ 04 февраля 2020

Вот один подход, который может работать для вас. В вашей службе аутентификации вы можете создать частное свойство BehaviorSubject для хранения последнего значения частного свойства входа в систему. Затем вы можете создать публикацию c, наблюдаемую с BehaviorSubject в качестве источника. Наконец, вы можете подписаться на публикацию службы c, наблюдаемую на вашей странице / компоненте, которая может получать и устанавливать все, что вам нужно, когда происходит изменение состояния свойства входа в систему. Вот простой пример того, как это может работать:

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>

Надеюсь, это поможет.

...