Ионная навигация по 4 вкладкам тянет контент вниз - PullRequest
Новая
       9

Ионная навигация по 4 вкладкам тянет контент вниз

0 голосов
/ 08 октября 2018

Я разрабатываю гибридное приложение с IONIC 4. Первая страница - это логин (слева), второй дом после аутентификации (справа):

enter image description here

Как видите, содержимое каждой вкладки скрыто внизу, и отображается только заголовок компонента.

Вот код:

Домашние маршруты 

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

import { HomePage } from './home.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: HomePage,
        children: [
            {
                path: 'newsfeed',
                outlet: 'newsfeed',
                loadChildren: '../news-feed/news-feed.module#NewsFeedPageModule'
            },
            {
                path: 'sitters',
                outlet: 'sitters',
                loadChildren: '../sitters/sitters.module#SittersPageModule'
            },
            {
                path: 'userprofile',
                outlet: 'userprofile',
                loadChildren: '../user-profile/user-profile.module#UserProfilePageModule'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/home/tabs/(newsfeed:newsfeed)'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomePageRoutingModule { }

Розетка и вкладки маршрутизатора домашней страницы 

<ion-tabs color="warning" useRouter="true">
  <ion-tab label="Feed" icon="paw" href="/home/tabs/(newsfeed:newsfeed)">
    <ion-router-outlet stack name="newsfeed"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Sitters" icon="people" href="/home/tabs/(sitters:sitters)">
    <ion-router-outlet stack name="sitters"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Profile" icon="person" href="/home/tabs/(userprofile:userprofile)">
    <ion-router-outlet stack name="userprofile"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Каждый компонент вкладки имеет что-то вроде 

<ion-header>
  <ion-toolbar>
    <ion-title>news-feed</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <p>Hello there.</p>
    </ion-item>
  </ion-list>
</ion-content>

Но содержимое всегда находится внизу.Есть идеи?Заранее благодарен воинам

1 Ответ

0 голосов
/ 20 октября 2018

Я просто столкнулся с той же проблемой.И я потратил почти 4 дня, пытаясь понять это!Это из-за ленивой загрузки.Поэтому вы должны сделать это: 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import NewsfeedPage from '../news-feed/news-feed.page';
import SittersPage from '../sitters/sitters.page';
import UserProfilePage from '../user-profile/user-profile.page';


import { HomePage } from './home.page';

const routes: Routes = [
    {
        path: 'tabs',
        component: HomePage,
        children: [
            {
                path: 'newsfeed',
                outlet: 'newsfeed',
                component: NewsFeedPage
            },
            {
                path: 'sitters',
                outlet: 'sitters',
                component: SittersPage
            },
            {
                path: 'userprofile',
                outlet: 'userprofile',
                loadChildren: UserProfilePage
            }
        ]
    },
    {
        path: '',
        redirectTo: '/home/tabs/(newsfeed:newsfeed)'
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class HomePageRoutingModule { }

Не забудьте импортировать модули в ваш home.module.ts

Надеюсь, это поможет.

...