Ionic 4: 设置根页面

Question

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

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

- athulpraj

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

- athulpraj

---

我尝试过，但是遇到了问题。我有登录和主页。在登录页面上，一旦用户登录，我会将会话保存到本地存储中，并根据您的答案，在app.component.ts上尝试检查条件并直接导航到主页。它可以工作，但有时它会显示登录页面一秒钟，然后重定向我到主页。有没有什么解决方法？ - Jaydip Kalkani

尝试像这样做：首先调用localstorage以获取会话信息。如果有且有效，则导航到主页，否则转到登录页面。 - Catalin Hatmanu

对我来说可以运行。在Ionic 4中。 - Abhijit Mondal Abhi

这并不是在设置根路径，而只是导航到页面。 - Argo

Answer 2

我不建议使用这种方法。

虽然这个方法可行，但Ionic 4现在依赖于本地Angular模块，其中包括Angular路由器。

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

如果您不知道如何操作，请单击此处访问Angular文档。

当您使用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的imports数组中

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

步骤三：

在你的 app.component.html 文件中，

添加 router-outlet 标签到 app.component.html 中： <ion-router-outlet></ion-router-outlet>

- Triple0t

---

ion-router-outlet 上的 main 是用来做什么的？ - trebor

抱歉，main是一个自定义指令。由于它对Ionic导航没有必要，我已将其删除。@trebor - Triple0t

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');

- Argo

Answer 4

如果您有一个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();
    }
....

这个代码可以验证逻辑并进行重定向，但如果您在同一页上，则不会重定向。

就是这样。

- gabrielrincon

Answer 5

我找到了解决方案。如下所示： 1.关于Root:

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

- Elavarasan r