Question

在Ionic 4中，我找不到在初始屏幕之后替换默认根页面的合适方法。以下是默认设置。

this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});

Answer 1

我不建议使用这种方法。

尽管这可行，但Ionic 4现在依赖于本机Angular模块，其中包括Angular Router。

要设置根页面，您需要在路由器模块中设置应用程序路由。

如果您不知道如何完成操作，请please click here to visit the angular docs

在使用ionic cli创建项目时，会自动为您添加路由模块。

这是在您的情况下如何实现的方法

第1步：

在您的index.html

检查<base href="/" >是否已添加到index.html文件中，如果不存在，请添加它。

第二步：

您的app.module.ts文件中的

在文件顶部，导入routerModule

import { RouterModule, Routes } from '@angular/router';

假设您已经创建了一个名为“首页”的页面，请配置您的应用程序路由

const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
}
];

将RouterModule添加到NgModule的imports数组中

@NgModule({
imports: [RouterModule.forRoot(routes)],
...
})

步骤3：

在您的app.component.html

中

将路由器出口添加到app.component.html <ion-router-outlet></ion-router-outlet>

Answer 2

找到了解决方案。首先创建您要作为根页面创建的页面

 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();
     });
 }

Answer 3

在Ionic 3中，用于导航的NavController中有push，pop和setRoot方法，其使用方式如下：

this.navCtrl.push('list');
this.navCtrl.pop('home');
this.navCtrl.setRoot('HomePage');

这些现在更改为

this.navCtrl.navigateForward('/list');
this.navCtrl.navigateBack('/home');
this.navCtrl.navigateRoot('/details');

Answer 4

如果您有角度路由器，请执行以下步骤：

在app.component中：

添加导入：

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();
    }
....

就这些。

这将使您的逻辑有效并进行重定向，但是，如果您位于同一页面中，请不要重定向。

Answer 5

我找到了解决方案。在下面给出

1。对于生根：

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();
     });

离子4：设置根页面

5 个答案: