离子导航控制器

Question

我需要在Ionic应用程序中使用三种类型的导航。有什么办法可以让我的代码最小化吗？ 主要问题：所有三个导航都有相同的侧面菜单，但标题导航不同。 我的第一次导航代码：

<ion-side-menus>
  <ion-side-menu-content drag-content="false">
    <ion-nav-bar class="bar-traveler">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-title class="heder-tabs">
        <div class="heder-avatar">
          <a >
            <img src="img/default-avatar.png">
          </a>
          <div class="karma-box-heder">1243</div>
        </div>
        <span><a >Travel</a></span>
        <span><a >Location</a></span>
        <span><a >Networking</a></span>
      </ion-nav-title>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
      <ion-nav-view class="has-header"></ion-nav-view>
  </ion-side-menu-content>


  <ion-side-menu side="right" class="has-header-nav">
    <ion-content class="navigation-bg-color">
      <ion-list class="app-right-navigation">
         <ion-item class="side-navigation-user sidenav-box" menu-close href="">
           <div class="user-nav">
            <div class="user-sidenav-logo">
              <img src="img/default-avatar.png">
              <div class="karma-box">1243</div>
            </div>
            <div class="first-three-nav-choice">User Name</div>
          </div>
        </ion-item>
        <ion-item class="side-navigation-pinko sidenav-box" menu-close href="">
          <div class="pinko-nav">
            <div class="pinko-sidenav-logo">
              <img src="img/pro4travel-logo.png">
            </div>
            <div class="first-three-nav-choice">Pinko</div>
          </div>  
        </ion-item>
        <ion-item class="side-navigation-club sidenav-box" menu-close href="">
          <div class="club-nav">
            <div class="club-sidenav-logo">
              <img src="img/app4travel-logo.png">
            </div>
            <div class="first-three-nav-choice">Club</div>
          </div>  
        </ion-item> 
        <ion-item class="other-nav-text" menu-close href="">
          <div class="icon-navigation"><i class="fa fa-th-large" aria-hidden="true"></i></div>
          <div class="text-nav-list">My Agency</div>
        </ion-item>
        <ion-item class="other-nav-text" menu-close href="">
          <div class="icon-navigation"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i></div>
          <div class="text-nav-list">My Karma</div>

        </ion-item>
        <ion-item class="other-nav-text" menu-close href="">
          <div class="icon-navigation"><i class="fa fa-bullhorn" aria-hidden="true"></i></div>
          <div class="text-nav-list">Notification</div>

        </ion-item>
        <ion-item class="other-nav-text" menu-close href="">
          <div class="icon-navigation"><i class="fa fa-user-circle" aria-hidden="true"></i></div>
          <div class="text-nav-list">Profile</div>
        </ion-item>
         <ion-item class="other-nav-text" menu-close href="">
          <div class="icon-navigation"><i class="fa fa-cog" aria-hidden="true"></i></div>
          <div class="text-nav-list">Settings</div>
        </ion-item>
        <ion-item class="other-nav-text" menu-close href="">
          <div class="icon-navigation"><i class="fa fa-sign-out" aria-hidden="true"></i></div>
          <div class="text-nav-list">Log out</div>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

所以图片上的Box1是包含我的Header导航的框（在其他两个导航中需要不同的导航） 而图片上的Box2就是盒子，它们保持不变。 在这里是图片如何在我的应用程序中查找：

因此，需要更改box1需要更改的页面，而box2需要保持不变。