我可以用ionc2在离子导航栏之外(即在离子含量中)定义离子标题吗

Question

我只想在一个单独的文件中定义离子头部分，以便将其用于多个屏幕。但我想在每个屏幕中定义标题。

对于离子1，为了做到这一点，我在离子视图中定义了的离子导航标题，如下所述：https://ionicframework.com/docs/api/directive/ionNavTitle/

离子2的离子含量中的离子标题似乎不可能：https://ionicframework.com/docs/v2/api/components/toolbar/Title/

我是对的？有什么诀窍吗？

谢谢，

朱利安

Answer 1

您可以创建一个Input变量。只需创建一个标题页：

Html

<!-- ngIf to prevent a 'flashing' title, remove and see for yourself if you don't understand -->
<ion-header *ngIf="customTitle">
<ion-navbar color="quintor">
<button menuToggle ion-button>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{customTitle}}</ion-title>
</ion-navbar> 
</ion-header>

TS

@Component({
selector: 'header-page',
templateUrl: 'header-page.html',
inputs: ['title']
})
export class HeaderPage {
//initialize if you remove the ngIf in html
public customTitle: string; //= "";
set title(value: string) {
if(value) {
this.customTitle = value;
}
}
constructor() { }
}

然后将HeaderPage添加到declarations(和entryComponents，取决于版本)下的@ngModule中

接下来，您可以在任何html文件中调用它(无需导入页面)，如下所示：

<header-page [title]="someVariable"></header-page>

或者只是

<header-page title="This is my title"></header-page>

(不完全确定title是否是保留项，如果是，只需将其更改为非保留项，例如pageTitle。)

Answer 2

我只想在一个单独的文件中按顺序定义离子头部分将其用于多个屏幕。

正如你在这个答案中看到的那样，@mhartington(来自Ionic团队)说：

没有办法创建全局离子导航栏，因为这是在意图为每个组件定义导航条的意义在于我们可以正确地动画标题，导航栏背景颜色(如果更改它们)并设置所需的其他属性的动画。

关于创建一个自定义指令以避免重复离子导航条html代码：

这仍然会在angular2内容投影的方式上产生错误作品当人们尝试这样做时，我们有几个问题是公开的而最好的答案就是不要这么做

所以，即使你试图做的事情完全有意义，但它可能会在以后引起一些问题，所以你应该避免这样做：(