web-dev-qa-db-ja.com

ionic 4で1つのページから別のページに移動するには？

私はIonicの初心者であり、これが私の最初のデモです。

1ページから別のページに移動したいので、以下のコードをhome.page.htmlファイル。

<div style="display: flex; justify-content: center; margin-top: 20px; margin-bottom: 20px;">
    <ion-button (click)="goToLoginPage()" size="large">Continue</ion-button>
</div>

以下であり home.page.tsファイルコード。

export class HomePage {

  constructor(public navController: NavController) {

  }

  goToLoginPage(){
    this.navController.navigateForward(LoginVCPage) // Getting error at this line.
  }
}

以下はエラーのスクリーンショットです。

enter image description here

助けていただければ幸いです

ionic-frameworkionic4
3
Kuldeep

Ionic 4を使用したNavControllerの使用は非推奨です。このステートメントを 移行ガイド から参照してください：

V4では、ナビゲーションに最も多くの変更が加えられました。ここで、Ionic独自のNavControllerを使用する代わりに、公式のAngularルーターと統合します。

Angularはルートを別のファイルで管理します。Ionic 4では、このファイルの名前はapp-routing.module.tsです。ionic g page pagenameを使用して新しいページを作成するたびに、CLIは自動的にapp-routing.module.tsのroutes配列の新しいエントリ。

したがって、テストページを作成し、app-routing.module.tsに次のルートがあるとします。

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'test', loadChildren: './test/test.module#TestPageModule' },
];

移動先のページへの対応するパス（'/test'など）を含むボタンにhrefプロパティを追加することで、別のページに移動できます。

<ion-button href="/test">Move to test page</ion-button>

指摘されているように、routerLinkディレクティブを使用することもできます here ：

<ion-button [routerLink]="['/test']">Move to test page</ion-button>

プログラムでナビゲートする必要がある場合は、ページ/コンポーネントにルーターサービスを挿入し、次のように navigateByUrl を呼び出す必要があります。

constructor(private router: Router) { }

goToTestPage() {
    this.router.navigateByUrl('/test');
}

このトピックの ルーティングに関するAngular docs および Ionic v4 docs も参照してください。

9
Phonolog

@Phonologの回答に追加するには、routerDirection="forward"またはその方向を使用する必要があります。

0
alex87