Ionic2所有页面的标题相同

Question

我希望所有网页都有相同的标题。

这是最好的方法，无需在所有页面中重复html +代码。

谢谢！

Answer 1

您可以通过使用配置生成header-component，然后相应地更改不同组件的配置来实现此目的。 创建自定义标题组件。
让我们称之为自定义标题组件＆＃39;

自定义首部-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);
  }
}

此自定义标头组件需要配置＆＃39; ismenu ＆＃39;类型为布尔值，＆＃39; ishome ＆＃39;类型为布尔值＆＆＃39; 标题＆＃39;类型字符串。现在让我们在页面组件＆＃39; 主页＆＃39;中使用此组件。我们希望主页组件只有标题和ismenu。我们的代码如下所示。

的＆＃39; home.html做为＆＃39;

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

的＆＃39; home.ts＆＃39;

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中，一个常见的问题是，单个标题/导航栏对于人来说不够灵活。

取自ionic forum

Answer 3

我遇到了同样的问题，无法找到合适的方法。 我认为最简单的方法是为标题创建一个新组件，然后将其包含在每个页面中（由其模板引用）。

我知道你必须在每个页面重复html标签，但它只有一行，也可以直接阅读。