Ioni c Вкладки не загружают содержимое страницы - PullRequest
Новая
       14

Ioni c Вкладки не загружают содержимое страницы

0 голосов
/ 11 марта 2020

Я пытаюсь разработать простой компонент вкладки ioni c уже несколько дней. У меня есть экран, где у пользователя есть 3 вкладки в нижнем слоте. При нажатии на вкладки запускается функция ngOnInit для вкладки, но я не могу загрузить Html, связанный с компонентом. Есть идеи, что может быть не так? Я поместил сообщение журнала консоли в метод ngOnInit, и оно показывает сообщение в консоли, поэтому я думаю, что маршрутизация настроена правильно. Я также вижу изменение URL-адреса.

Мой HTML код: 

                <ion-tab-button tab="journey">
                    <ion-icon name="walk"></ion-icon>
                  <ion-label>Journey</ion-label>
                </ion-tab-button>

              <ion-tab-button tab="learning">
                  <ion-icon name="book"></ion-icon>
                <ion-label>Current Learning</ion-label>
                <ion-badge>6</ion-badge>
              </ion-tab-button>

              <ion-tab-button tab="profile">
                  <ion-icon name="information-circle"></ion-icon>
                  <ion-label>Profile</ion-label>
              </ion-tab-button>
            </ion-tab-bar>
          </ion-tabs> 
 </ion-toolbar>

Я попытался использовать страницу ioni c, а затем также попробовал использовать компонент ioni c. Оба подхода показывают одинаковое поведение запуска ngOnInit и изменения URL, но HTML, связанный с вкладкой, не загружается.

Мой код routing-module.ts 

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

import { ChildDetailPage } from './child-detail.page';
import { CurrentLearningPageModule } from '../../current-learning/current-learning.module';
import { CurrentLearningComponent } from '../../current-learning/current-learning.component';
import { ProfileComponent } from '../../profile/profile.component'

const routes: Routes = [
  {
    path: '',
    component: ChildDetailPage,
    children:[
      {
        path: 'journey',
        children:
            [
              {
                path: '',
                loadChildren: './child-detail.page'
              }
            ]
      },
      {
        path: 'learning',
        children:
            [
              {
                path: '',
                //loadChildren: '../../current-learning/current-learning.module#CurrentLearningPageModule'
               // loadChildren: () => import('../../current-learning/current-learning.module').then( m => m.CurrentLearningPageModule)
               component: CurrentLearningComponent
              }
            ]
      },
      {
        path: 'profile',
        loadChildren: () => import('../../profile/profile.component').then( m => m.ProfileComponent)
      },

      // {
      //   path: '',
      //   redirectTo: 'journey',
      //   pathMatch: 'full'
      // }
    ]
  },
  {
    //path: '',
    //redirectTo: 'child/child-detail/',
    //pathMatch: 'full'
  }
];

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

Любая помощь будет глубоко признателен!

1 Ответ

0 голосов
/ 11 марта 2020

Я выяснил проблему!

Проблема была в коде HTML. Я поместил код иона в тег нижнего колонтитула. Код вкладки с ионами должен присутствовать на вкладке содержания ионов.

Я поместил код в нижний колонтитул, чтобы вкладки отображались в нижнем колонтитуле. Однако, чтобы сделать это, все, что мне нужно было сделать, это использовать ion-tab-bar slot = «bottom», которого я не заметил!

...