web-dev-qa-db-fra.com

Ionic 4: Définition de la page racine

Dans Ionic 4 Je n'ai pas trouvé de moyen approprié de remplacer la page racine par défaut après l'écran de démarrage. Voici la configuration par défaut.

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

J'ai trouvé la solution. Créez d'abord la page que vous souhaitez créer en tant que page racine

 ionic generate page pagename

Dans app.component.ts

 import { Router } from '@angular/router';

A l'intérieur du constructeur ajouter

 private router : Router

puis initialiser

 initializeApp() {
     this.platform.ready().then(() => {
       this.router.navigateByUrl('pagename');
       this.statusBar.styleDefault();
       this.splashScreen.hide();
     });
 }
11
Athul Raj

Je ne suggérerais pas d'utiliser cette méthode.

bien que cela fonctionne, Ionic 4 repose désormais sur des modules natifs Angular, cela inclut le routeur Angular.

pour définir une page racine, vous devrez définir les itinéraires de votre application dans le module routeur.

si vous ne savez pas comment procéder, veuillez cliquer ici pour consulter les documents angular

lorsque vous créez un projet avec le ionic cli, le module de routage est ajouté automatiquement pour vous.

Voici comment les implémenter dans votre cas;

étape 1:

dans votre index.html

vérifier si le <base href="/" > a été ajouté au fichier index.html, s'il n'est pas là, veuillez l'ajouter.

étape 2:

dans votre fichier app.module.ts

en haut du fichier, importez le routerModule

import { RouterModule, Routes } from '@angular/router';

configurer les itinéraires de vos applications, en supposant que vous avez déjà créé une page nommée 'home'

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

ajouter le RouterModule au tableau des importations du NgModule

@NgModule({
imports: [RouterModule.forRoot(routes)],
...
})

étape 3:

dans votre app.component.html

ajoutez la sortie du routeur à app.component.html <ion-router-outlet></ion-router-outlet>

6
Triple0t

Si vous avez un Angular Router, voici la procédure:

dans app.component:

Ajouter des importations:

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

C'est tout.

Cela valide votre logique et redirige, mais, si vous êtes sur la même page, ne redirigez pas.

1
gabrielrincon

Dans Ionic 3, nous avions les méthodes Push, pop & setRoot dans NavController for Routing utilisées comme suit:

this.navCtrl.Push('list');
this.navCtrl.pop('home');
this.navCtrl.setRoot('HomePage');

Celles-ci sont désormais remplacées par

this.navCtrl.navigateForward('/list');
this.navCtrl.navigateBack('/home');
this.navCtrl.navigateRoot('/details');
0
Karsus