包括 ionic 2/angular 2 的通用标题栏

Posted 2023-03-13

【中文标题】包括 ionic 2/angular 2 的通用标题栏

【英文标题】：including the common header bar for ionic 2/angular 2

【发布时间】：2016-12-17 18:44:06

【问题描述】：

我有一个 ionic-2 标题栏，其中包含 home 或 logout 按钮和 company logo，这是所有页面通用的。我如何编写一个通用函数（@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() 的函数。有什么办法可以避免这种情况吗？

【问题讨论】：

我收到此错误：错误：未捕获（承诺中）：错误：模板解析错误：'custom-header' 不是已知元素：1. 如果 'custom-header' 是 Angular组件，然后验证它是否是该模块的一部分。 2. 如果“custom-header”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

【参考方案1】：

我知道这已经过时了，但我找到了一个可能尽可能简单的解决方案。

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

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

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

.. 我们不能将 header 变成组件，因为 ion-header 需要是根级组件。所以，下面的不起作用

<common-header></common-header>

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

...我发现确实有效的是两者的简单组合。使用包含所有内容的模板创建一个 common-header 组件，但 ion-header 标记。

common-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() 
        
    

common-header.html：

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

最后，在您想要标题的页面中，只需包含 ion-header 标记的 common-header inside

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

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

【讨论】：

我在执行此操作时收到此错误：错误：模板解析错误：无法绑定到“标题”，因为它不是“自定义标题”的已知属性。 1. 如果'custom-header' 是一个Angular 组件并且它有'header' 输入，那么验证它是这个模块的一部分。 2. 如果 'custom-header' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("][header]="header_data">..

【参考方案2】：

您可以通过使用配置制作 header-component 来做到这一点，然后相应地更改不同组件的配置。 创建自定义标头组件。 我们将其称为“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'

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

主页标题看起来像这样。

【讨论】：

执行此操作时出现此错误：错误：模板解析错误：无法绑定到“标题”，因为它不是“自定义标题”的已知属性。 1. 如果'custom-header' 是一个Angular 组件并且它有'header' 输入，那么验证它是这个模块的一部分。 2. 如果 'custom-header' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 3. 允许任何属性将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("][header]="header_data">

@amit gupta 你还需要导入 custom header component 并将其添加到 app.module.ts 上的声明中

【参考方案3】：

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

没有办法创建全局离子导航栏，因为这是在 目的。为每个组件定义导航栏的意义在于 我们可以正确地为标题设置动画，导航栏背景颜色（如果 您更改它们）并为所需的其他属性设置动画。

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

这仍然会导致 angular2 内容投影的错误 作品。 当人们尝试这个时，我们有几个问题已经解决了 最好的答案是不要这样做。