Ionic 4 компонент не рендеринг на навигацию - PullRequest
Новая
       45

Ionic 4 компонент не рендеринг на навигацию

0 голосов
/ 24 сентября 2019

Я использую 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>

routTo ('messages') и routTo ('forum') в файле TS. 

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
        }]
}])

Ответы [ 2 ]

0 голосов
/ 27 сентября 2019

Я нашел решение.Этот ответ для тех, кто сталкивается с тем же.Просто добавьте 'ion-content' на каждой странице разметки или в отдельном HTML.например, формы component ABC и component XYZ сохраняют всю разметку внутри ионного содержимого. 

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

Дополнительные сведения о вкладках в Ionic 4:

Ionic 4 внесли некоторые изменения во вкладки, которыеменяет способ работы с годами.Теперь вы можете использовать вкладки просто как кнопки (они не будут принудительно маршрутизировать ваше приложение только потому, что они являются вкладками). Я удалил атрибут tab из вкладок (эта функция официально предоставлена ​​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>

Теперь выше просто кнопки, которые выглядят как вкладки.Используя их, вам не нужно беспокоиться об одноименных маршрутах.Просто перейдите к различным компонентам, просто нажав на вкладки.

0 голосов
/ 25 сентября 2019

Разве вы не пытаетесь получить доступ к компонентам, которые загружаются через lazy-load?Потому что когда вы обновляете страницу, они хорошо загружаются.

Попробуйте изменить с: 

<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. Во время их работы я t НЕ рекомендуется использовать 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}`);
  }
}

С уважением.

...