[英]How to set rootPage in IONIC 4
這就是我現在所擁有的,似乎真的無法找到我四處尋找的問題的正確答案,所以也許知道的人可以幫助我? 我如何將 RootPage 像 ionic 3 一樣設置為 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 {
}
我希望以下內容對您有所幫助:
constructor(private nav: NavController){}
private setRoot(){
this.nav.navigateRoot('/getting-started');
}
Ionic 4 使用路由來導航。 您可以在/src/app/app-routing.module.ts
找到路由的配置,即使您仍然可以在app.module.ts
文件中進行設置。 引用Ionic 4 文檔: ,最基本的配置看起來有點像這樣:
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
...
RouterModule.forRoot([
{ path: '', component: LoginComponent },
{ path: 'detail', component: DetailComponent },
])
],
})
我們這里最簡單的細分是路徑/組件查找。 當我們的應用加載時,路由器通過讀取用戶試圖加載的 URL 來啟動。 在我們的示例中,我們的路由尋找 '',它本質上是我們的索引路由。 因此,為此,我們加載 LoginComponent。 非常坦率的。
如果你想在初始加載時加載不同的組件,你應該使用重定向
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.