web-dev-qa-db-ja.com

Ionic 4 setRoot with Angular Router

Ionic 3プロジェクトを最新のIonic 4にアップグレードしていますが、ルーティングに問題があります。InIonic 3次のようにsetRootを使用しました。

handler: () => navCtrl.parent.parent.setRoot(HomePage, 'logout', {animate: true})

Ionic 4の最新のnavCtrlにはgoBack、goForward、およびgoRootのみがあり、親の使用方法がわかりません。AngularでActivatedRouteを見つけましたが、これは正しいとは思わないどうすればいいですか

angulartypescriptionic-frameworkionic4
11
Riccardo

一般的に言えば、 ジョシュモロニーによるこの件に関するこの素晴らしい記事 ：

Ionic 4 with Angularルーティングでは、定義するルートページはありません。

Ionic 4はAngularのルーターに依存しているため、NavControllerはこの新しい現実を反映するように変更されており、Angularアプリケーションには、ルート」ルート。ルート間を単純に移行し、フレームワークが残りの作業を行います。

一般的に、メソッドnavigateRoot、navigateBackward、およびnavigateForwardは、Ionicアニメーションの処理方法を指示するためのものです。したがって、navigateRoot in Ionic 4は、使用したものと同じことを達成するためにsetRoot on Ionic 3。

前述の記事を読むことを強くお勧めします。これは、Ionicのバージョン3からバージョン4にルートを移行するために知っておくべき多くのことをカバーしています。

18
Elvis Fernandes

@ angular/routerで期待する動作を実現する1つの方法は、NavigationExtrasのreplaceUrlとskipLocationChangeを使用することです ここの公式ドキュメント

this.router.navigate([pageLink], {replaceUrl: true})

しかし、はい、参照されたnavigateRootは、ionic 3

7
Igor

Ionic 4のルートページにページを設定するには、setRootの代わりにnavigateRootを使用する必要があります

this.navCtrl.navigateRoot('/pageName');
3
Tahseen Quraishi

Anglerのルーターを使用せずにsetRootを実行できます。このコードは、Ionic 4

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) { 

}

navigateRoot（）

navigateRoot（rl：string | UrlTree | any []、options ?: NavigationOptions）：Promise;

 this.navCtrl.navigateRoot('/app/profile');

角度のルーターでのsetDirection（）

setDirection（direction：RouterDirection、animated ?: boolean、animationDirection ?: 'forward' | 'back'） ：void;

ナビゲートあり：

this.navCtrl.setDirection('root');
this.router.navigate(['/app/profile']);

navigateByUrlの場合：

this.navCtrl.setDirection('root');
this.router.navigateByUrl('/app/profile');

またはディレクティブを使用：

<a routerLink="/app/profile" routerDirection="root">Proceed</a>
0
Snow Bases