Ionic 4：设置根页面答案

【问题标题】：Ionic 4 : Setting root pageIonic 4：设置根页面
【发布时间】：2020-07-15 18:07:54
【问题描述】：

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

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

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案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();
     });
 }

【讨论】：

我试过这个，但我遇到了问题。我有登录和主页。在登录页面上，一旦用户登录，我将会话保存到本地存储，根据您的回答，我尝试检查 app.component.ts 上的条件并直接导航到主页。它可以工作，但有时它会显示登录页面一秒钟，然后将我重定向到主页。有没有办法解决这个问题？
尝试做这样的事情：首先调用 localstorage 进行会话。如果你有任何有效的导航到主页，否则转到登录页面。
为我工作。在离子 4 中。
这不是设置root，只是导航到页面。

【解决方案2】：

我不建议使用这种方法。

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

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

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

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

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

第一步：

在你的 index.html 中

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

第二步：

在您的 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 的 imports 数组中

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

第 3 步：

在你的 app.component.html

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

【讨论】：

main 上的 ion-router-outlet 是什么？
抱歉，主要是自定义指令。我已将其删除，因为离子导航不需要它@trebor

【解决方案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();
    }
....

就是这样。

这使您的逻辑和重定向有效，但是，如果您在同一页面中，请不要重定向。

【讨论】：

【解决方案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');

【讨论】：

【解决方案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();
     });

【讨论】：