包括 ionic 2/angular 2 的通用标题栏 [英] including the common header bar for ionic 2/angular 2

问题描述

我有一个 ionic-2 标题栏，其中包含 home 或 logout 按钮和 company logo，这是所有页面通用的.我如何编写一个通用函数(@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 来做到这一点，然后相应地更改不同组件的配置.创建自定义标题组件.
让我们将其称为custom-header-component"

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

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"、布尔类型的ihome"和字符串类型的title".现在让我们在页面组件home"中使用这个组件.我们希望主页组件只有标题和 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/>

主页标题看起来像这样.

Home page header would look like this.

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