webentwicklung-frage-antwort-db.com.de

Ionic 4 setRoot mit Angular Router

Ich aktualisiere mein Ionic 3-Projekt auf das neueste Ionic 4 und habe Probleme mit dem Routing. In Ionic 3 habe ich setRoot genauso verwendet: 

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

Die neueste navCtrl von Ionic 4 enthält nur goBack, goForward und goRoot. Ich habe ActivatedRoute in Angular gefunden, aber ich denke nicht, dass dies der richtige Weg ist. Wie kann ich?

3
Riccardo

Im Allgemeinen und unter Berufung auf diesen großartigen Artikel zu diesem Thema von Josh Morony :

In Ionic 4 mit Angular -Routing muss keine Stammseite definiert werden.

Da Ionic 4 auf Angulars Router angewiesen ist, wurde der NavController geändert, um diese neue Realität widerzuspiegeln, und für eine Angular -Anwendung gibt es keine "root" -Route. Sie wechseln einfach zwischen den Routen, und der Rahmen erledigt den Rest der Arbeit.

Im Allgemeinen sind die Methoden navigateRoot, navigateBackward und navigateForward hier nur, um Ionic den Umgang mit Animationen zu zeigen. Sie können also navigateRoot in Ionic 4 verwenden, um dasselbe zu erreichen, wie Sie setRoot in Ionic 3 verwendet haben.

Ich empfehle Ihnen dringend, den oben genannten Artikel zu lesen. Er enthält viele Informationen, die Sie zum Migrieren Ihrer Routen von Version 3 auf Version 4 von Ionic benötigen.

10
Elvis Fernandes

Mit @ angle/router können Sie das erwartete Verhalten erreichen, indem Sie replaceUrl und skipLocationChange der NavigationExtras verwenden hier in offiziellen Dokumenten Der Code würde ungefähr so ​​aussehen:

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

Aber ja, der referierte navigateRoot existiert nicht auf @ angular/router wie auf ionic 3

7
Igor

Um Ihre Seite auf die Stammseite in Ionic 4 zu setzen, sollten Sie navigateRoot anstelle von setRoot verwenden.

this.navCtrl.navigateRoot('/pageName');
0

Sie können Root einstellen, ohne den Router von Angle zu verwenden. Dieser Code funktioniert in 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 () mit dem Fräser des Winkels

setDirection (direction: RouterDirection, animated ?: boolean, animationDirection ?: 'forward' | 'back') : nichtig;

mit navigieren:

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

mit navigateByUrl:

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

oder mit Direktive:

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