web-dev-qa-db-ja.com

Ionic 4：ルートページの設定

Ionic 4では、スプラッシュスクリーンの後でデフォルトのルートページを置き換える適切な方法が見つかりませんでした。以下はデフォルトのセットアップです。

this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});
angularionic-frameworkionic4
8
Athul Raj

解決策を見つけました。最初に、作成するページをルートページとして作成します

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

この方法の使用はお勧めしません。

これは機能しますが、Ionic 4はNative Angular Modulesに依存します。これにはAngularルーターが含まれます。

ルートページを設定するには、ルーターモジュールでアプリのルートを設定する必要があります。

方法がわからない場合は、 ここをクリックしてangular docs にアクセスしてください

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)],
...
})

ステップ3：

in app.component.html

router-outletをapp.component.html <ion-router-outlet></ion-router-outlet>に追加します

6
Triple0t

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

それで全部です。

これはあなたのロジックとリダイレクトを有効にしますが、同じページにいる場合はリダイレクトしないでください。

1
gabrielrincon

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