在Ionic 4中,我找不到一种合适的方法来替换启动画面后的默认根页面。以下是默认设置。
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
找到了解决方案。首先创建您想要作为根页面的页面。
ionic generate page pagename
在 app.component.ts 文件中
import { Router } from '@angular/router';
在构造函数内部添加
private router : Router
然后进行初始化
initializeApp() {
this.platform.ready().then(() => {
this.router.navigateByUrl('pagename');
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
<base href="/" >
添加到index.html文件中,如果没有,请添加它。import { RouterModule, Routes } from '@angular/router';
假设您已经创建了名为“home”的页面,请配置您的应用程序路由
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
}
];
将RouterModule添加到NgModule的imports数组中
@NgModule({
imports: [RouterModule.forRoot(routes)],
...
})
<ion-router-outlet></ion-router-outlet>
ion-router-outlet
上的 main
是用来做什么的? - treborthis.navCtrl.push('list');
this.navCtrl.pop('home');
this.navCtrl.setRoot('HomePage');
this.navCtrl.navigateForward('/list');
this.navCtrl.navigateBack('/home');
this.navCtrl.navigateRoot('/details');
import {NavController} from '@ionic/angular';
import {ActivatedRoute} from '@angular/router';
// in the constructor:
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private route: ActivatedRoute,
private navController: NavController,
...
) {
this.initializeApp();
....
if ( this.route.snapshot['_routerState'].url !== '/theRoute') {
this.navController.navigateRoot('/theRoute')
.then();
}
....
就是这样。
app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
rootPage: any = 'register'; //<--- Just change the 'register' into your page name
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router : Router
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
2. 导航:
如果只是导航到另一个页面,请使用以下代码
initializeApp() {
this.platform.ready().then(() => {
this.router.navigateByUrl('Your_page_name');
this.statusBar.styleDefault();
this.splashScreen.hide();
});