带有离子标签的 ionic3 页脚

Question

我想为所有页面制作一个通用页脚，页脚有 5 个按钮， 第一个是默认选择的，这个或第一个按钮打开的页面有三个选项卡，我做了三个选项卡，一切都很好，但我不知道如何添加页脚？我应该在每个页面上添加它吗？(会有很多重复(任何想法？ 离子选项卡它没有像我想要的那样出现在所有页面上，因为我在 app.module.ts 上添加

tabsHideOnSubPages: true
<ion-tabs [selectedIndex]="mySelectedIndex"
name="mainTabs"
tabsPlacement="top"
tabsLayout="icon-hide"
tabsHighlight="true"
[ngClass]="showTabs? 'appear-tabs':'disappear-tabs'">
<ion-tab [root]="exploreRoot" tabTitle="A"></ion-tab>
<ion-tab [root]="spotlightRoot" tabTitle="B"></ion-tab>
<ion-tab [root]="webinarsRoot" tabTitle="C"></ion-tab>
</ion-tabs>

页脚：

<ion-footer>
<ion-toolbar>
<ion-buttons>
<!--Main-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-home"></ion-icon>
<label class="title-icon-footer">AAA</label>
</div>
</button>
<!--my Programs-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="ios-play"></ion-icon>
<label class="title-icon-footer">BBB</label>
</div>
</button>
<!--my webinars-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-desktop"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my notification-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-notifications"></ion-icon>
<label class="title-icon-footer">CCC</label>
</div>
</button>
<!--my account-->
<button ion-button block color="icons-color">
<div>
<ion-icon name="md-person"></ion-icon>
<label class="title-icon-footer">DDD</label>
</div>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

Answer 1

我想做同样的事情，但最终没有使用选项卡，并创建了一个包含在每个页面上的页脚组件。我将导航控制器从页面传递到页脚，以便页脚可以导航到页面。

在每一页上.html <ion-footer> <my-footer [navController]="navController"></my-footer> </ion-footer>

页脚组件.html <ion-grid no-padding> <ion-row align-items-center> <ion-col col-6 text-center> <button ion-button icon-only (click)="gotoPage('HomePage')"> <ion-icon name="md-apps"></ion-icon> <span>Home</span> </button> </ion-col> <ion-col text-center> <button ion-button icon-only (click)="gotoPage('ContactPage')"> <ion-icon name="md-list-box"></ion-icon> <span>Contact</span> </button> </ion-col> </ion-row> </ion-grid>

页脚组件 .ts 从"@angular/核心"导入 { 组件，输入 }; 从"ionic-angular"导入 { 导航控制器 }

;

@Component({
selector: 'mwc-footer',
templateUrl: 'mwc-footer.html'
})
export class MwcFooterComponent {
@Input('navController') navController;
constructor() { }
public gotoPage(page: string): void {
this.navController.setRoot(page);
}
}