Ionic2所有页面的标题相同

Question

我希望所有页面都有相同的标题.

什么是最好的方法,而不必在所有页面重复html +代码.

谢谢!

Answer 1

您可以通过使用配置生成header-component,然后相应地更改不同组件的配置来实现此目的.创建自定义标头组件.
让我们称之为" 定制头分量 "

自定义标题,component.html

<ion-navbar>
  <button *ngIf="header_data.ismenu" ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <button *ngIf="header_data.ishome" class="algo-header-home-icon" ion-button icon-only (click)="homeClick()">
    <ion-icon class="ion-home" name="home"></ion-icon>
  </button>
  <ion-title class="header-title" [ngClass]="{'ishome-title': header_data.ishome,'ismeun-centre': !header_data.ishome}">
    {{header_data.title}}
  </ion-title>
</ion-navbar>

定制报头component.ts

import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';

@Component({
  selector: 'custom-header',
  templateUrl: 'custom-header.html'
})
export class CustomHeaderComponent {
  header_data: any;
  constructor(public navCtrl: NavController) {}
  @Input()
  set header(header_data: any) {
    this.header_data=header_data;
  }
  get header() {
    return this.header_data;
  }
  homeClick() {
    this.navCtrl.setRoot(HomePage);
  }
}

这个自定义标头组件采用类型为boolean的配置' ismenu ',类型为boolean的' ishome '和类型为string的' title '.现在让我们在页面组件" home "中使用此组件.我们希望主页组件只有标题和ismenu.我们的代码看起来像这样.

'home.html做为'

<ion-header><custom-header [header]="header_data"></custom-header></ion-header>
 <ion-content padding class="page-home">
   <p>Home Page</p>
 </ion-content>

'home.ts'

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  header_data:any;
  constructor(public navCtrl: NavController) {
    this.header_data={ismenu:true,ishome:false,title:"Home"};
  }
}

主页标题如下所示:

Answer 2

我找到了一种更简单的方法,根本不需要重复代码!虽然它不是那么简单但它满足了我的需求:

只需将ion-header组件与app组件一起放在组件内ion-nav.

将您的应用组件模板更改为:

<ion-header>
  <ion-title>{{appTitle}}</ion-title>
</ion-header>
<ion-nav [root]="rootPage"></ion-nav>

并在您app.scss添加一些样式,使页面显示在标题下:

.ion-page > ion-content
{
   top: 52px;//your headers height
}

这应该在所有页面中显示您的标题.

请注意,不建议这样做:

每页都有不同的标题是我们做出的设计决定.在Ionic 1中,一个常见的问题是单个标题/导航栏对于人来说不够灵活.

取自离子论坛