子视图选项卡犯规显示

我有我的子视图的标题下一个标签导航，所以我写了下面的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>

导航栏和“富！”显示，但不是标签。有任何想法吗？

来源

2017-08-15 ramiromd

是你在同一页面中使用'ion-content'和'ion-tabs'的原因吗？你期望它如何展示？ –

这不是应该如何使用标签。你能告诉我们你想要完成什么，这样我们可以看到什么是正确的做法？ – sebaferreras

我错了。离子选项卡必须具有您自己的组件：

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是两个普通页面。

来源

2017-08-16 15:00:24 ramiromd

子视图选项卡犯规显示

回答

相关问题