javascript - ion-header-bar 指令中的动态文本

Question

我使用ion-header-bar指令 - 使得左侧为 class="button" ，中间是<h1> (“最近”一词)右边是 - <ng-icon> 。

左侧的文本是动态的(i18驱动)，它导致中间部分向右移动(如果我将左侧设置为海岸文本，效果很好)

<ion-header-bar  class="bar bar-header bar-stable" no-tap-scroll="true">
    <a class="button icon-left ion-chevron-left button-clear button-positive">{{'homePage' | i18n}}
    </a>
    <h1 class="title">Recent</h1>
    <ng-icon type="messenger-left-header-icons" non-pressable="true" class="icon_plus"></ng-icon>
</ion-header-bar>

它如何运作良好 -

它是如何工作不好的 -

如何修复动态文本？

Answer 1

在标题中使用此结构，并附上左右按钮或图标。

<ion-header-bar  class="bar bar-header bar-stable" no-tap-scroll="true">
  <div class="buttons">
      <a class="button icon-left ion-chevron-left button-clear button-positive">{{'homePage' | i18n}}</a> 
  </div>
  <h1 class="title">Recent</h1>
  <div class="buttons">
    <ng-icon type="messenger-left-header-icons" non-pressable="true" class="icon_plus"></ng-icon>
  </div>
</ion-header-bar>