Ionic 4：设置根页面

Question

在 Ionic 4 中，我找不到合适的方法来替换启动画面后的默认根页面。以下是默认设置。

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

Answer 1

找到解决方案。首先创建你想做的页面作为根页面

 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 2

我不建议使用这种方法。

虽然这可行，但 Ionic 4 现在依赖于原生 Angular 模块，这包括 Angular 路由器。

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

如果你不知道这是怎么做到的，please click here to visit the angular docs

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

以下是在您的情况下如何实施；

第 1 步：

在你的 index.html

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

第 2 步：

在您的 app.module.ts 文件中

在文件的顶部，导入 routerModule

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

配置您的应用程序路由，假设您已经创建了一个名为 'home'

的页面

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

将 RouterModule 添加到 NgModule 的导入数组中

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

第 3 步：

在你的app.component.html

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

Answer 3

如果你有一个 Angular 路由器，这是程序：

在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 4

在 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 5

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

1.For 生根：

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

Ionic 4：设置根页面

Ionic 4 : Setting root page

ionic-framework

angular

ionic4