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

Posted 2023-03-13

【中文标题】带有 ionic-2-sidemenu 应用程序的顶部导航栏中的导航按钮

【英文标题】：Navigation buttons inside top navbar with ionic-2-sidemenu app

【发布时间】：2017-08-09 15:35:27

【问题描述】：

我正在尝试在侧边菜单应用程序的导航栏中实现菜单，与 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 的新手。

【参考方案1】：

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

答案：组件

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

<navbar></navbar>

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

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

【讨论】：

谢谢！你能帮我正确声明组件（哪个文件）吗？

您在打字稿文件中创建组件。您可以在 html 文件中定义模板，即上面的 html。基本角度分量。我不会在关于 SO 的评论中向您解释如何创建角度组件，因为互联网上到处都是示例。 angular.io 网站上的指南也非常有帮助。

查看以下帖子。某个善良的人有耐心在他们对同一问题的回答中输入一堆代码。 ***.com/questions/35936198/…

感谢@HaydenBraxton，但 mhartington 评论说警告说这会产生 angular 2 错误...你怎么看？

您好，很抱歉让您感到困惑。所以他的意思是，没有办法将导航栏标记放在代码中的一个位置，并将其应用于应用程序中的所有页面。我敢肯定实际上有一种方法，但这不是重点。我说要做的和他说的是一回事。创建一个组件，您可以根据需要将其称为导航栏，然后在每个需要导航栏的页面上，您必须将该组件放在页面顶部。