Блог

Я использовал это руководствоhttps://alligator.io/ionic/ionic-4-tabs чтобы создать маршрутизацию для моих вкладок Ionic, но, к сожалению, отображаемое содержимое всегда скрыто и не может быть показано.

Мой home.page.html выглядит так:

 <ion-header>
  <ion-tabs style="display: contents;">

  <ion-tab-bar slot="top">

    <ion-tab-button tab="popular">
      <ion-label>SOme text</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
</ion-header>
  

Я определил маршруты внутри home-routing.module.ts:

 const routes: Routes = [
    {
        path: 'tabs',
        component: HomePage,
        children:
            [
                {
                    path: 'popular',
                    children:
                        [
                            {
                                path: '',
                                loadChildren: '../popular/popular.module#PopularPageModule'
                            }
                        ]
                }
           ]
     }
]
  

И мой popular.page.module.html выглядит так:

 <ion-header>
  <ion-toolbar color="primary">
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<h1>Hallo</h1>
</ion-content>
  

Я исключил h1-тег «Hallo», но, к сожалению, он ничего не показывает. Действительно, интересно то, что тег h1 отображается в инструментах разработчика в браузере.

Есть идеи?

Это вызвало у меня головную боль XD. вы не должны помещать свои вкладки в свой заголовок. компонент / элемент taps генерируется на уровне выше страницы, где, поскольку элемент заголовка генерируется внутри страницы, поэтому вставление вкладок в заголовок вызывает всевозможные безумия.

Я просмотрел руководство и получил его для правильного отображения

home.page.html —

 <ion-tabs>
<ion-tab-bar slot="top" color="primary">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

<ion-tab-button tab="tab2">
      <ion-label>SOme text</ion-label>
      <ion-icon name="heart"></ion-icon>
      <ion-badge>6</ion-badge>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
  

пожалуйста, прокомментируйте материал, который вы хотите, чтобы я добавил