带有 ionic-2-sidemenu 应用程序的顶部导航栏中的导航按钮

Question

我正在尝试在侧边菜单应用程序的导航栏中实现菜单，与 here 相同，但使用 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>

但它不干净。

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

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

Answer 1

确保我理解正确的问题：您想要一种方法让您在上面发布的所有代码都可以在每个页面上显示而无需重复代码？

答案：组件

您可以只制作一个组件，并将上面的代码用作组件的模板。例如，如果您要将组件的选择器设置为“导航栏”，那么您就不需要上面的所有代码，而是放

<navbar></navbar>

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

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