包括离子2 /角2的公共标题栏 [英] including the common header bar for ionic 2/angular 2

问题描述

我有一个ionic-2标题栏，其中包含主页或注销按钮和公司徽标，这对所有页面都是通用的。我如何编写一个通用函数（@Injectable（）），这样就可以很容易地包含在所有页面中而不是重复代码。

I have a ionic-2 header bar containing the home or logout button and company logo which is common for all the pages. How do i write a common function(@Injectable()), so that it will be very easy to include in all the pages instead of repeating the code.

<ion-header>
  <ion-navbar class="hide-border toolbar-btn-color" id="radio">
    <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Send Money</ion-title>
    <ion-buttons end>
      <button (click)="goHome()">
        <ion-icon ios="ios-home" md="md-home"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

在每个打字稿文件中，我重复一个名为gohome（）的函数。有什么方法可以避免这个吗？

In the every typescript file, i am repeating the function called gohome(). Is there any way to avoid this one?

推荐答案

您可以通过使用配置生成header-component然后更改配置来实现此目的相应的不同组件。
创建自定义标题组件。
允许将其称为自定义标题组件


自定义标头组件.html

You can do this by making header-component with configuration and then change configuration on different components accordingly. Create custom header component.
Lets Call it 'custom-header-component'

custom-header-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>

custom- header-component.ts

custom-header-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);
  }
}

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


'home.html'

This custom-header-component takes configurations 'ismenu' of type boolean, 'ishome' of type boolean and 'title' of type string. Now lets use this component in page component 'home'. We want home page component to only have title and ismenu. Our code looks like this.

'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/>

主页标题如下所示。

这篇关于包括离子2 /角2的公共标题栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！