您可以通过使用配置来创建标头组件,然后相应地更改不同组件上的配置来实现此目的。
创建自定义标头组件。
让我们称之为'自定义标头组件'
自定义标头组件.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>
自定义标头组件.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);
}
}
这个自定义标头组件采用配置'ismenu' 布尔类型, 'ishome' 布尔类型和 'title' 字符串类型。现在让我们在页面组件中使用这个组件'home'。我们希望主页组件只有标题和菜单。我们的代码看起来像这样。
'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"};
}
}
<br/><br/>
主页标题看起来像这样。