标题两侧的 Ionic 2 导航栏图标答案

【问题标题】：Ionic 2 navbar icons on both side of title标题两侧的 Ionic 2 导航栏图标
【发布时间】：2017-07-22 20:09:20
【问题描述】：

我正在尝试在标题位于中心的离子头的每一侧添加两个图标，但它总是以右侧的两个图标结束。

这是我的代码

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only><ion-icon name="chatboxes"></ion-icon></button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons end>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

导致这个标题：

我想不通，尝试了不同类型的教程并试图复制他们的示例，但没有成功。它后面也没有样式，所以没有什么会弄乱布局。感觉就像这个版本的 Ionic 或其他东西中的“开始”元素被窃听了。有人能指出我正确的方向吗？

这是我运行“离子信息”时的输出：

Your system information:

 ordova CLI: 6.5.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.5
Xcode version: Not installed

【问题讨论】：

我假设您使用的是 android，因为没有 xcode 版本。从文件中，它说：start Positions element to the left of the content in ios mode, and directly to the right in md and wp mode 这意味着你看到的是正确的，因为它不是 ios。
看这里：ionicframework.com/docs/v2/api/components/toolbar/Toolbar
也许可以试试left which Positions elements to the left of all other elements的属性
是的，我在 Android 中开发了它，完全错过了它。完全愚蠢的错误。谢谢。

标签： html css ionic-framework ionic2

【解决方案1】：

我用left代替start

检查这个plunker

<ion-header>
  <ion-navbar color="primary">
    <ion-buttons left>
        <button ion-button icon-only>
          <ion-icon name="chatboxes"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Title</ion-title>
    <ion-buttons right>
      <button ion-button icon-only><ion-icon name="notifications"></ion-icon></button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

【讨论】：

天哪，这很难找到。为什么他们通常使用“start”，但在其他地方需要“left”，这令人困惑！

【解决方案2】：

@varun aaruru 答案是正确的。我只是想补充添加hideBackButton="true" 以删除后退按钮

<ion-header hideBackButton="true">
    <ion-navbar>
        <ion-title>trans-result</ion-title>
    </ion-navbar>
</ion-header>

【讨论】：