2017-03-06 50 views
2

如果我在根HTML中设置了导航栏,那么动态设置我的ion-navbar中标题的最佳方法是什么?例如ionic 2 - Dynamic ion-title

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!

+0

这是一个类似的要求,但不完全相同。 [** HERE **](http://stackoverflow.com/questions/42596458/how-can-i-detect-the-inner-html-change-in-a-div-with-angular-2/42596914# 42596914) – Aravind

+0

并不真正与ionic2相关,但我喜欢这样做的方式是在所有应用路径上定义投影,将每个应用路径映射到菜单标题和标题。然后您可以在更高级别的组件中访问它。我不确定这是否适用于离子。 –

回答

1

目前,我给每个组件视图它自己的离子导航栏在其 相应的HTML文件

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

为了解决闪烁问题,请从app.html文件中删除ion-header尝试和刚刚离开的

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

然后在每一页,包括与适当的标题头:

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

很好的回答,很高兴知道不要花费大量时间来创建一个全球性的ion-nav栏,但是问题并不在于菜单要持久! – user2085143

+0

接受答案作为我的问题实际上是如何设置动态离子标题,而不是如何消除闪烁问题! – user2085143