我一直试图在Ionic 4升级项目中实现rxjs Observable模式,但没有成功,我想知道如何成功实现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();
});
是否有一种方法可以与旧的离子事件具有相同的功能Ionic 4使用Observable或Subject实现的功能?
这是一种可能对您有用的方法。在您的身份验证服务中,您可以创建一个私有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>
希望这会有所帮助。