顶部导航栏内的导航按钮，带有离子 2 侧菜单应用程序

Question

我正在尝试在侧菜单应用程序的导航栏中实现菜单，与此处相同，但使用 ionic 2：顶部导航栏中的一些导航按钮。

我是 ionic 2 的新手，所以我用 ionic start APP sidemenu --v2 启动了一个新应用程序现在我明白导航栏位于每个页面的标题中。

所以我会在每个页面上用我的导航按钮重复我的顶部导航栏，如下所示：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons right>
  <button ion-button icon-only><!-- or your method, this is for closing a modal -->
     <ion-icon name="md-person"></ion-icon>
  </button>
</ion-buttons>
<ion-buttons right>
  <button ion-button icon-only><!-- or your method, this is for closing a modal -->
     <ion-icon name="ios-search"></ion-icon>
  </button>
</ion-buttons>
  </ion-navbar>
</ion-header>

但它并不干净。

有没有办法在菜单.html文件中分隔此导航栏，或者我应该在每个页面的标题中复制我的按钮？

启动混合侧边菜单/选项卡需要什么代码？我是 Angular 2 的新手。

Answer 1

确保我正确理解这个问题：您希望一种方式让您上面发布的所有代码都出现在每个页面上而不必重复代码？

答：组件

您可以只创建一个组件，并使用上面的代码作为组件的模板。例如，如果您要使组件的选择器成为"导航栏"，那么您只需将

<navbar></navbar>

在需要导航栏的每个页面的顶部。

我们使用Ionic在工作中构建我们的应用程序，这正是我们所做的。一般来说，无论是离子还是角度，如果你想重用一些代码而不到处复制和粘贴，那么组件就是你的答案。