子视图选项卡不显示

Question

我的子视图的标题下有一个选项卡导航，所以我写了以下html：

<ion-header>
<ion-navbar primary>
<ion-title>Productos</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs tabsPlacement="top">
<ion-tab tabTitle="Catalogo"></ion-tab>
<ion-tab tabTitle="Pedido"></ion-tab>
</ion-tabs>
<ion-content padding>Foo !!</ion-content>

将显示导航栏和"Foo ！！"，但不显示选项卡。有什么想法吗？

Answer 1

我错了。离子标签必须具有您自己的组件：

import { Component } from '@angular/core';
import { ProductCatalog } from './catalog.component';
import { ProductCart } from './cart.component';
@Component({
templateUrl: 'tabs.html'
})
export class ProductTabs {
catalog:any = ProductCatalog;
cart:any = ProductCart;
constructor() {}
}

<!-- tabs.html only tabs widget -->
<ion-tabs tabsPlacement="top">
<ion-tab [root]="catalog" tabTitle="CATALOGO"></ion-tab>
<ion-tab [root]="cart" tabTitle="CARRITO"></ion-tab>
</ion-tabs>

ProductCatalog 和 ProductCart 是两个普通页面。