web-dev-qa-db-ja.com

Ionic 4：routerLinkを使用してナビゲーション方向（後方/前方）を設定する方法？

Ionic 4はAngularルーターを使用します。ただし、独自のNavControlerがまだあるので、navigateBackwardメソッドとnavigateForwardメソッドを使用してプッシュ/ポップナビゲーションスタイルをシミュレートできます。

Ion-back-buttonが表示されるように、navigateForwardとnavigateBackwardを使用する必要があると思います。

私のアプリケーションでは、navControllerではなくrouterLinksを使用して（ユーザーが別のタブでページを開くことができるように）ナビゲートすることを好みます。

しかし、routerLinksでは、イオンバックボタンは表示されません。 routerLinksをプッシュ/ポップナビゲーションのように機能させる方法が必要です。

RouterLinksを使用してnavigateForwardやnavigateBackwardなどのイベントをシミュレートするにはどうすればよいですか？

angular-ui-routerangular7directionionic4routerlink
5
Natanael

Ionic 3からIonic 4にナビゲートすると、かなり変更されましたが、変更はそれほど悪くありません。Ionicドキュメントでは、Angular従来のIonicポップアンドプッシュの代わりにルーティングに切り替えることを推奨しています。ページをルーティングする方法はいくつかありますが、 .tsファイルでnavigateForward()およびnavigateBack()関数を使用するのが最も簡単に理解できると思います。

例.

navigateForward(){
    this.navCtrl.navigateForward('/route of the page you want to navigate to');
  }
<ion-button large block (click)="navigateForward()">
      Navigate Forward
</ion-button>

もちろん、前後にナビゲートすることは、スタックからアプリを構築する方法の構造に関係しています。

app-routing.module.tsファイルは、生成されたページのルートを自動的に作成しますが、ルートを手動で変更したり、ルートページを設定したりできます。

ルーティングチュートリアルへの優れたリファレンス here 。アプリ全体でルートを使用してナビゲートするさまざまな方法も示します。

1
Stephen Romero