带有离子标签的 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

我也想这样做，但最终没有使用标签，而是创建了一个页脚组件，我将其包含在每个页面上。我将 navController 从页面传递到页脚，以便页脚可以导航到页面。

在每个页面上 .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/core'导入{组件，输入}； 从 'ionic-angular' 导入 { NavController };

@Component({
    selector: 'mwc-footer',
    templateUrl: 'mwc-footer.html'
})
export class MwcFooterComponent {

    @Input('navController') navController;

    constructor() { }

    public gotoPage(page: string): void {
        this.navController.setRoot(page);
    }
}