Ionic2 navigation & circular depencies

Ionic Framework ionic-v3
5

What I did to solve the circular import problem:
Each of the @Pages can invoke each other, by passing a string name to this NavigationService.

The Navigation service, get’s around the circular import by late binding, using require() directly.

Presumably you could do this in each @Page, but I find this a cleaner solution. Also the closeMenu implements a hack to close slideout menus if they hapen to be open (a bug in earlier versions of Ionic2)

import {IonicApp} from 'ionic-framework/ionic';
import {Injectable} from 'angular2/core';

@Injectable()
export class NavigationService {
pages = {};
constructor(private app: IonicApp) {
    this.pages['imageGrid'] = require('../pages/img-grid/img-grid').ImageGrid;
    this.pages['templateGrid'] = require('../pages/template-grid/template-grid').TemplateGrid;
    this.pages['articleSelect'] = require('../pages/article-select/article-select').ArticleSelect;
    this.pages['imageEdit'] = require('../pages/img-edit/img-edit').ImageEdit;
}

closeMenu() {
  this.app.getComponent('leftMenu').close();
  setTimeout(() => {
    console.log('deactivating background');
    document.getElementsByClassName('backdrop')[0]['style']['transform'] = '';
   }, 1000);
}

rootPage(page:string, params?: {}) {
  let nav = this.app.getComponent('nav');
  if (nav) {
    nav.setRoot(this.pages[page]);
  }
  this.closeMenu()
 }
nextPage(page: string, params?: {}) {
  let nav = this.app.getComponent('nav');
  if (nav) {
    nav.push(this.pages[page], params);
  }
  this.closeMenu()
}
}