我希望所有页面都有相同的标题.
什么是最好的方法,而不必在所有页面重复html +代码.
谢谢!
您可以通过使用配置生成header-component,然后相应地更改不同组件的配置来实现此目的.创建自定义标头组件.
让我们称之为" 定制头分量 "
自定义标题,component.html
{{header_data.title}}
定制报头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做为'
Home Page
'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"}; } }
主页标题如下所示:
我找到了一种更简单的方法,根本不需要重复代码!虽然它不是那么简单但它满足了我的需求:
只需将ion-header
组件与app
组件一起放在组件内ion-nav
.
将您的应用组件模板更改为:
{{appTitle}}
并在您app.scss
添加一些样式,使页面显示在标题下:
.ion-page > ion-content { top: 52px;//your headers height }
这应该在所有页面中显示您的标题.
请注意,不建议这样做:
每页都有不同的标题是我们做出的设计决定.在Ionic 1中,一个常见的问题是单个标题/导航栏对于人来说不够灵活.
取自离子论坛