Question

我有一个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（）的函数。有什么方法可以避免这个吗？

Answer 1

您可以通过使用配置生成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); } }

此自定义标头组件采用布尔类型的配置“ ismenu ”，布尔类型的“ ishome ”和字符串类型的“标题”。现在让我们在页面组件“主页”中使用此组件。我们希望主页组件只有标题和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/>

主页标题看起来像这样。

Answer 2

我知道这已经过时了，但我找到了一个可能很简单的解决方案，而且你可以获得简单的解决方案。

正如Ionic团队所说，通过DESIGN，每个页面都应该有自己的标题。

<ion-header>
    <ion-navbar>
        <ion-title>Login</ion-title>
    </ion-navbar>
</ion-header>

<ion-content>
    My content
</ion-content>

..我们无法将标题转换为组件，因为 ion-header 需要是根级组件。因此，以下不起作用

<common-header></common-header>

<ion-content>
    My content
</ion-content>

...我发现DOES的工作是两者的简单组合。使用包含但 ion-header 标记的模板创建一个common-header组件。

<强>共header.ts ：

//Include Input to @angular/core
import { Component, Input } from '@angular/core';

    @Component({
        selector: "common-header",
        templateUrl: "common-header.html"
    })
    export class CommonHeaderComponent {
        defaultTitle = "My default title";
        _title = this.defaultTitle;

        @Input()
        set title(newTitle: string) {
            newTitle = newTitle.trim();
            if (newTitle.length === 0) {
                newTitle = this.defaultTitle;
            }
            this._title = newTitle;
        }
        get title() {
            return this._title;
        }

        constructor() {
        }
    }

<强>共header.html中：

<ion-navbar>
    <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
</ion-navbar>

最后，在您希望标题的页面中，只包含 ion-header 标记的内部

<ion-header>
    <common-header [title]="'Title that is passed in'"></common-header>
</ion-header>

<ion-content>
 My content
</ion-content>

Answer 3

就像你在this answer看到的那样，@ mhartington（来自Ionic团队）说：

无法创建全局离子导航栏，因为这样做了目的。为每个组件定义导航栏的重点是这样的我们可以正确设置标题，导航栏背景颜色的动画（如果你改变它们并动画所需的其他属性。

关于创建自定义指令以避免在每个视图中复制代码：

这仍然会产生有关angular2内容投影的错误作品。 当人们尝试这个问题时，我们会遇到几个问题最好的答案是不要这样做。

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

3 个答案: