Question

我正在使用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>

但是内容始终在底部。有任何想法吗？在此先感谢战士

Answer 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

希望这会有所帮助。

Ionic 4标签导航将内容拖到底部

1 个答案: