Ionic 4: установка корневой страницы

В Ionic 4 мне не удалось найти подходящий способ заменить корневую страницу по умолчанию после заставки. Ниже приведены настройки по умолчанию.

this.platform.ready().then(() => {
  this.statusBar.styleDefault();
  this.splashScreen.hide();
});
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
8
0
20 377
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Нашел решение. Сначала создайте страницу, которую хотите сделать как корневую.

 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, и, согласно вашему ответу, я попытался проверить состояние на app.component.ts и перейти к дому напрямую. Он работает, но иногда он показывает страницу входа на секунду, а затем перенаправляет меня на домашнюю страницу. Есть ли способ решить эту проблему?

Jaydip Kalkani 24.04.2019 11:59

Попробуйте сделать что-то вроде этого: сначала вызовите localstorage для сеанса. если они у вас есть и они действительны, перейдите на домашнюю страницу, иначе перейдите на страницу входа в систему.

Catalin Hatmanu 15.05.2019 23:00

Работает для меня. В Ionic 4.

Abhijit Mondal Abhi 15.06.2019 16:39

Это не установка корня, а только переход к странице.

Karsus 10.01.2020 09:44

Я бы не предлагал использовать этот метод.

хотя это работает, 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 22.12.2018 01:35

извините, главное было настраиваемой директивой. Я удалил его, так как он не требуется для ионной навигации @trebor

Triple0t 22.12.2018 08:49

Если у вас есть маршрутизатор 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();
     });

Другие вопросы по теме