Ionic 4 标签导航将内容拉到底部答案

【问题标题】：Ionic 4 tabs navigation pulls content to bottomIonic 4 标签导航将内容拉到底部
【发布时间】：2019-03-13 12:54:55
【问题描述】：

我正在使用 IONIC 4 开发一个混合应用程序。第一个页面是登录页面（左），第二个页面是经过身份验证的主页（右）：

如您所见，每个选项卡的内容都隐藏在底部，仅显示组件标题。

这里有一些代码：

回家路线

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>

但内容总是在底部。有任何想法吗？提前感谢勇士们

【问题讨论】：

这是因为延迟加载。仅供参考：4.0.0-beta.18 删除了 ion-tab 的使用，并且没有必要使用命名的插座。当前Demo + 说明可以找到here.

标签： angular6 angular-routing ionic4

【解决方案1】：

我刚遇到同样的问题。我花了将近 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 中导入模块

希望它会有所帮助。

【讨论】：