Angular 我可以用ionic2在离子导航栏外（即离子内容）定义离子标题吗？

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

为了做到这一点，我在ion视图中定义了ion导航标题，如下所示：

离子含量中的离子标题似乎不可能使用离子2：

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

谢谢

---

Julien

您可以创建一个

输入变量。只需创建一个标题页：

Html

然后将
标题页添加到
声明
下的
@ngModule
（和
入口组件
，具体取决于版本）

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


或者只是


（不完全确定
title
是否是保留的术语，如果是，只需将其更改为非保留的术语，例如
pageTitle
。）

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

正如你在《爱奥尼亚团队》中看到的，@mhartington（来自爱奥尼亚团队）说：

无法创建全局离子导航栏，因为这是在
目的。为每个组件定义导航栏的意义在于
我们可以正确地设置标题动画，导航栏背景色（如果
您可以更改它们），并根据需要设置其他属性的动画

关于创建自定义指令以避免复制navbar html代码：

这仍然会在angular2内容投影的方式上产生错误
作品当人们尝试这种方法时，我们有几个问题尚未解决
最好的答案是不要这样做

因此，即使您试图做的事情完全有道理，但以后可能会导致一些问题，因此您应该避免这样做：（
请注意，如果这不起作用，请添加您的代码以便我们可以对其进行调试。谢谢，我终于按照您的建议创建了一个自定义组件。请注意，我还必须添加自定义css代码以使其正常工作（在Ionic 2.1中）：
标题页+离子内容{div.scroll-content，div.fixed-content{margin top:70px；}}
<!-- 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>

@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() { }
}