如何在IONIC 4中设置rootPage

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在IONIC 4中设置rootPage相关的知识,希望对你有一定的参考价值。

这就是我现在所拥有的,似乎无法找到我的问题的正确答案,我到处寻找所以也许有人知道可以帮助我吗?我如何将离子3中的RootPage设置为Ionic 4,因为我尝试了所有内容,这就是尝试所留下的内容

import {Component, ViewChild} from '@angular/core';
import {NavController, 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';
import {GettingStartedPage} from './getting-started/getting-started.page';

@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
})

export class AppComponent {
@ViewChild(NavController) nav: NavController;
rootPage;


constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private NavCtrl: NavController) {
    this.initializeApp();
}

// Eindigt constructor

initializeApp() {
    this.platform.ready().then(() => {
        this.splashScreen.hide();
        // set status bar naar onze app kleur
        this.statusBar.backgroundColorByHexString('#E84B56');
    });
}

openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.rootPage.navigateRoot('/getting-started');

}
}
答案

从Ionic 4开始,您就可以使用Angular Routing。如果你想让/getting-started成为你的根页,请进入app-routing.module.ts并编辑路线。如果您没有,请创建一个指向您的页面的路线,并将带有path: ''的路线重定向到/getting-started

所以最终的app-routing.module.ts可能是:

const routes: Routes = [
    {path: '', redirectTo: 'getting-startet', pathMatch: 'full'}, //Root Path redirect to your getting-started path
    {path: 'getting-started', loadChildren: './getting-started/getting-started.module#GettingStartedPageModule'}, // when hit the getting-startet path, load the page
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

以上是关于如何在IONIC 4中设置rootPage的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Ionic 5 中设置语言环境

如何在android的片段中设置应用程序上下文?

如何在 ionic.io -push 通知中设置大图像

如何在 Angular/Ionic 框架中设置离子输入的样式?

Ionic 3 - 在警报控制器中设置 id 值

如何使用 Ionic (Angular) 在一个对话框中设置开始时间、结束时间和持续时间