0

我正在使用 Ionic 4 和 Angular 8 我在我的应用程序底部有以下选项卡，并且希望通过单击选项卡从论坛和消息导航到与选项卡关联的不同组件。但问题是页面不会在单击选项卡时呈现，但如果我刷新页面，则导航工作正常。我不知道我在这里错过了什么。

标签 HTML

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected tab="food" (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="non-food" (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" tab="createListing" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button tab="forum" (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="messages" (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

TS 文件中的 routesTo('messages') 和 routesTo('forum')。

routeTo(route: string){
    this.navCtrl.navigateForward(`sharing/${route}`);
  }

我在 LandingPageModule 中有一个登录页面，我从该页面直接路由到“共享/主页”，这是“共享”的子路由

有关更多信息，我将基本路由模块设置为：

const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  { path: 'landing', loadChildren: () => import('./landing/landing.module').then(mod=> mod.LandingPageModule) },
  { path: 'sharing', loadChildren: () => import('./sharing/sharing.module').then(mod=> mod.SharingModule)  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

分享模块的路线如下：

RouterModule.forChild([
      {
        path: '',
        component: ShareLayoutComponent,
        children:[{
          path: 'home',
          component: HomeComponent
        },
        {
          path: 'forum',
          component: ForumComponent
        },
        {
          path: 'messages',
          component: MessageComponent
        }]
}])
4

2 回答 2

0

您不会尝试访问通过延迟加载加载的组件吗？因为当您刷新页面时，它们会很好地加载。

尝试更改：

<ion-tab-button tab="messages" (pointerup)="routeTo('messages')">
   <ion-icon name="chatboxes"></ion-icon>
   <ion-label>Messages</ion-label>
</ion-tab-button>

至：

<ion-tab-button tab="messages">
   <ion-icon name="chatboxes"></ion-icon>
   <ion-label>Messages</ion-label>
</ion-tab-button>

并检查包含这些组件的当前模块的路由

例子：

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'messages',
        children: [
          {
            path: '',
            loadChildren: '../messages/messages.module#MessagesModule'
          }
        ]
      }
    ]
  }
];
  • 注意：如果从 Ionic 3 迁移，请注意一些熟悉的 Ionic 导航元素在版本 4 中已被弃用。虽然它们有效，但不建议使用 NavController 或 ion-nav。

改用角度路由器：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({ ... })
export class HomePage {
  constructor(private router: Router) {}

  routeTo(route: string){
    this.router.navigateByUrl(`sharing/${route}`);
    this.navCtrl.navigateForward(`sharing/${route}`);
  }
}

此致。

于 2019-09-24T21:32:24.660 回答
0

我找到了解决方案。这个答案是为那些面临同样问题的人准备的。只需在每个标记页面或单独的 HTML 中添加“ion-content”。例如，在 ion-content 中形成component ABC并component XYZ保留所有标记。

<ion-content
  <!--Your HTML goes here-->
</ion-content>

有关 Ionic 4 中选项卡的其他详细信息：

Ionic 4 对选项卡进行了一些更改，从而改变了多年来的工作方式。现在您可以将选项卡用作按钮（它们不会仅仅因为它们是选项卡而强行路由您的应用程序）我已经从选项卡中删除了选项卡属性（这是 Ionic 正式提供的功能）。它将如何提供帮助？您将了解何时路由延迟加载的路由，或者food不是non-food单独的页面但它们只是过滤一些home page具有所有逻辑的内容的场景。

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button selected (pointerup)="changeItems('food')">
      <ion-icon name="pizza"></ion-icon>
      <ion-label>Food</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="changeItems('non-food')">
      <ion-icon name="basket"></ion-icon>
      <ion-label>Non-Food</ion-label>
    </ion-tab-button>
    <ion-tab-button class="add-circle" (pointerup)="routeTo('createListing')">
      <ion-icon name="add-circle"></ion-icon>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('forum')">
      <ion-icon name="folder"></ion-icon>
      <ion-label>Forum</ion-label>
    </ion-tab-button>
    <ion-tab-button (pointerup)="routeTo('messages')">
      <ion-icon name="chatboxes"></ion-icon>
      <ion-label>Messages</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

现在上面只是看起来像标签的按钮。通过使用它们，您不必担心同名路由。只需单击选项卡即可路由到不同的组件。

于 2019-09-27T14:46:58.757 回答