包括离子2 /角2的公共标题栏

发布时间：2020-12-17 17:58:38 所属栏目：安全来源：网络整理

导读：我有一个ionic-2标题栏,其中包含所有页面通用的主页或注销按钮和公司徽标.我如何编写一个通用函数(@Injectable()),这样就可以很容易地包含在所有页面中而不是重复代码. ion-header ion-navbar class="hide-border toolbar-btn-color" id="radio" button menu

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

<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()的函数.有没有办法避免这个？

解决方法

您可以通过使用配置生成header-component,然后相应地更改不同组件的配置来实现此目的.
创建自定义标头组件.让我们称之为’custom-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"};
  }
}
<br/><br/>

主页标题看起来像这样.

enter image description here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!