离子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现在依赖于Native Angular Modules,其中包括Angular Router.

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

如果你不知道如何做到这一点,请点击这里访问角度文档

当您使用离子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)],
...
})

第3步:

在你的app.component.html中

将router-outlet添加到app.component.html <ion-router-outlet></ion-router-outlet>