Question

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

使用离子1，为此，我在离子视图中定义 ion-nav-title ，如下所示：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添加到@ngModule下的declarations（和entryComponents，具体取决于版本）

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

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

或者只是

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

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

Answer 2

我想按顺序在一个单独的文件中定义ion-header部分将它用于多重屏幕。

就像你在this answer中看到的那样， @mhartington （来自Ionic团队）说：

无法创建全局离子导航栏，因为这样做了目的。为每个组件定义导航栏的重点是这样的我们可以正确设置标题，导航栏背景颜色的动画（如果你改变它们并动画所需的其他属性。

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

这仍然会产生角度2内容投影的错误作品。当人们尝试这个时，我们有几个问题已经公开最好的答案是不要这样做。

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

我可以用离子2定义离子导航棒外的离子标题（即离子含量）吗？

2 个答案: