离子2 - 动态离子标题

时间:2017-03-06 12:59:43

标签: javascript html angular ionic2

如果我在根HTML中设置了导航栏,那么在我的离子导航栏中动态设置标题的最佳方法是什么? e.g。

app.html

<ion-header>
  <ion-navbar>
    <ion-title>{{some title here}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

<ion-footer>
</ion-footer>

目前,我正在给每个组件查看它在相应HTML文件中的自己的离子导航栏,但标题在视图之间闪烁,我认为这是因为每次都会创建一个新的导航栏。

任何建议都会很棒。

Thaanks!

1 个答案:

答案 0 :(得分:1)

  

目前,我正在给每个组件查看它自己的离子导航栏   相应的HTML文件

这正是你应该如何处理ion-navbar的。如果您正在考虑定义自定义组件以包含导航栏并在整个应用程序中重复使用它,请不要这样做(来自Ionic团队的@mhartington解释了为什么您不应该在this SO post中执行此操作)。

要解决闪烁问题,请尝试从ion-header文件中删除app.html,然后离开

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

然后在每个页面中,包含具有正确标题的标题:

<ion-header>
  <ion-navbar>
    <ion-title>{{ pageTitle }}</ion-title>
  </ion-navbar>
</ion-header>