For now i “fixed” this problem by implementing a page-base.ts and extend every page class on this class. But i know this is not the best solution. I also tried to implement this ion-header inside an directive but i could get the navcontroller to work in the directive code. Any thoughts on how to solve this better?
Thanx
Sivard
The code for the basepage.
import { Component, ViewChild } from '@angular/core';
import {NavParams, LoadingController, NavController } from 'ionic-angular';
import {WordPressService} from '../providers/word-press-service/word-press-service';
import {GlobalVars} from '../providers/global-vars/global-vars';
export class BasePage {
public wpdata: any;
public pageTitle: string;
public searchPage: any;
constructor(
public wordpressService: WordPressService,
public loadingCtrl: LoadingController,
public globalvars: GlobalVars,
public navCtrl: NavController
) {
this.pageTitle = "Welcome";
}
public loadPage(id: number,
type: string,
pagename: string) {
console.log('loadPage : ' + pagename + ',' + id + ',' + type);
this.wordpressService.loadPage(pagename, id, type)
.then(content => {
console.log('html loaded : ' + JSON.stringify(content));
this.wpdata = content;
this.pageTitle = this.wpdata.title != null ? this.wpdata.title.rendered : pagename;
});
};
public goSearch() {
if (this.searchPage) {
this.navCtrl.push(this.searchPage);
}
}
}
The page.ts code
import {Component, ViewChild, Directive} from '@angular/core';
import {Config, NavParams, NavController, LoadingController } from 'ionic-angular';
import {WordPressService} from '../../providers/word-press-service/word-press-service';
import {GlobalVars} from '../../providers/global-vars/global-vars';
import {BasePage} from '../../config/page-base';
// import {MenuHeader} from '../../components/header/header';
import {SearchPage} from '../search/search';
/*
Generated class for the PagePage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
templateUrl: 'build/pages/page/page.html',
providers: [WordPressService, GlobalVars],
// directives: [MenuHeader]
})
export class PagePage extends BasePage {
constructor(
public wordpressService: WordPressService,
public loadingCtrl: LoadingController,
public nav: NavController,
public globalvars: GlobalVars,
private navParams: NavParams
) {
super(wordpressService, loadingCtrl, globalvars, nav);
this.searchPage = SearchPage;
this.loadPage(
this.navParams.get('id'),
this.navParams.get('type'),
'page'
);
}
}
the page.html look now like this.
<ion-header>
<ion-nav-bar>
<ion-toolbar primary>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{pageTitle}}</ion-title>
<ion-buttons end>
<button (click)="goSearch()"> <ion-icon name="search"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-nav-bar>
</ion-header>
<ion-content class="has-header">
<div *ngIf="wpdata" [innerHTML]="wpdata.postmeta.mobile_content">
loading....
</div>
<p></p>
</ion-content>