В Ionic 4 мне не удалось найти подходящий способ заменить корневую страницу по умолчанию после заставки. Ниже приведены настройки по умолчанию.
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
Нашел решение. Сначала создайте страницу, которую хотите сделать как корневую.
ionic generate page pagename
В app.component.ts
import { Router } from '@angular/router';
Внутри конструктора добавьте
private router : Router
а затем инициализировать
initializeApp() {
this.platform.ready().then(() => {
this.router.navigateByUrl('pagename');
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
Попробуйте сделать что-то вроде этого: сначала вызовите localstorage для сеанса. если они у вас есть и они действительны, перейдите на домашнюю страницу, иначе перейдите на страницу входа в систему.
Работает для меня. В Ionic 4.
Это не установка корня, а только переход к странице.
Я бы не предлагал использовать этот метод.
хотя это работает, Ionic 4 теперь полагается на собственные модули Angular, включая Angular Router.
чтобы установить корневую страницу, вам потребуется установить маршруты вашего приложения в модуле маршрутизатора.
если вы не знаете, как это делается, пожалуйста, нажмите здесь, чтобы посетить угловую документацию
когда вы создаете проект с помощью ionic cli, модуль маршрутизации добавляется автоматически.
Вот как это реализовать в вашем случае;
шаг 1:
в вашем index.html
проверьте, добавлен ли <base href = "/" >
в файл index.html, если его нет, добавьте его.
шаг 2:
в вашем файле app.module.ts
в верхней части файла импортируйте routerModule
import { RouterModule, Routes } from '@angular/router';
настроить маршруты приложения, предполагая, что вы уже создали страницу с именем 'home'
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
}
];
добавить RouterModule в массив импорта NgModule
@NgModule({
imports: [RouterModule.forRoot(routes)],
...
})
шаг 3:
в вашем app.component.html
добавить роутер-розетку в app.component.html
<ion-router-outlet></ion-router-outlet>
Для чего нужен main
на ion-router-outlet
?
извините, главное было настраиваемой директивой. Я удалил его, так как он не требуется для ионной навигации @trebor
Если у вас есть маршрутизатор Angular, это процедура:
в app.component:
Добавить импорт:
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();
}
....
Это все.
Это соответствует вашей логике и перенаправлению, но, если вы находитесь на той же странице, не перенаправляйте.
В Ionic 3 у нас были методы push, pop и setRoot в NavController для маршрутизации, используемые следующим образом:
this.navCtrl.push('list');
this.navCtrl.pop('home');
this.navCtrl.setRoot('HomePage');
Теперь они изменены на
this.navCtrl.navigateForward('/list');
this.navCtrl.navigateBack('/home');
this.navCtrl.navigateRoot('/details');
Я нашел решение. Нижеприведенный
1. для укоренения:
app.component.ts
import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss']
})
export class AppComponent {
rootPage: any = 'register'; //<--- Just change the 'register' into your page name
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router : Router
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
2. Для навигации:
Чтобы просто перейти на другую страницу, используйте приведенный ниже код
initializeApp() {
this.platform.ready().then(() => {
this.router.navigateByUrl('Your_page_name');
this.statusBar.styleDefault();
this.splashScreen.hide();
});
Я пробовал это, но столкнулся с проблемой. У меня есть логин и домашняя страница. На странице входа в систему после входа пользователя я сохраняю сеанс в localstorage, и, согласно вашему ответу, я попытался проверить состояние на app.component.ts и перейти к дому напрямую. Он работает, но иногда он показывает страницу входа на секунду, а затем перенаправляет меня на домашнюю страницу. Есть ли способ решить эту проблему?