[英]Ionic 5: How to refresh current page
I need to refresh home page after successful login authentication.登录认证成功后需要刷新主页。 Here, i am using below code for moving to next page after successful login and used Firebase for back-end.
在这里,我使用下面的代码在成功登录后移动到下一页,并使用 Firebase 作为后端。
this.router.navigate(['home']);
It just opening home page without refreshing.它只是打开主页而不刷新。 welcome, if anyone can give me a solution.
欢迎,如果有人可以给我一个解决方案。
You can use BehaviorSubject .您可以使用BehaviorSubject 。 In this way you will be able to get that information in any component without the need to refresh the entire page/screen.
通过这种方式,您将能够在任何组件中获取该信息,而无需刷新整个页面/屏幕。
1.) Create service. 1.) 创建服务。 For example data.service.ts
例如data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class DataService {
private messageSource = new BehaviorSubject('');
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: string) {
this.messageSource.next(message)
}
}
1.1.) Import that service inside app.module.ts 1.1.) 在app.module.ts中导入该服务
import { DataService } from './services/data.service';
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
...
DataService
],
2.) On your login page, login.page.ts , set username 2.) 在您的登录页面login.page.ts 上,设置用户名
import { DataService } from '../services/data.service';
let username: string;
constructor(private _dataService: DataService) {...
this._dataService.changeMessage(this.username);
3.) On your home page, home.page.ts , you will access that info 3.) 在您的主页home.page.ts 上,您将访问该信息
import { DataService } from '../services/data.service';
let username: string;
constructor(private _dataService: DataService) {...
this._dataService.currentMessage.subscribe((message) => {
if(message){
this.username = message;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.