Make Ionic2 Controllers global - ionic-framework

Question

I need alertCtrl: AlertController, sanitizer: DomSanitizer, modalCtrl: ModalController, toastCtrl: ToastController on several places in my App. Is there a way to make them global available or do I really have to forward them through all classes, in my case through 4 constructors?

Answer 1

If you declare providers in a module, they will be forwarded to all components under this module. Then, they could be considered as global if you declare them in the app.module.
If what you want is to not import them into each component that need them, the only option I see is to wrap them into a factory provider or a custom one and then import only this new provider :
EDIT : Coding
Global provider example
Test environment :
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 3.19
Node Version: v6.9.1
Xcode version: Not installed
App
./src/app/app.module.ts :
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { DefaultModal } from '../modals/default/default.modal';
import {GlobalProvider} from '../providers/global.provider'
#NgModule({
declarations: [
MyApp,
HomePage,
DefaultModal
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
DefaultModal
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, GlobalProvider]
})
export class AppModule {}
Modal
./src/modals/default/default.modal.html :
<ion-header>
<ion-navbar>
<ion-title>{{nav_params.title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Global controller :
</ion-list-header>
<ion-item *ngFor="let controller of nav_params.global_provider_names">
{{controller}}
</ion-item>
</ion-list>
</ion-content>
./src/modals/default/default.modal.scss :
default_modal {
}
./src/modals/default/default.modal.ts :
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { NavParams } from 'ionic-angular';
#Component({
selector: 'default-modal',
templateUrl: 'default.modal.html'
})
export class DefaultModal
{
nav_params
constructor(
private nav : NavController
, private _nav_params : NavParams
)
{
this.nav_params =
{
title : this._nav_params.get(
"title"
)
, global_provider_names : this._nav_params.get(
"global_provider_names"
)
}
}
}
Home page
./src/pages/home/home.html :
<ion-header>
<ion-navbar>
<ion-title>
Home page
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button
ion-button
(click)="present_alert()"
>
Present alert
</button>
<button
ion-button
(click)="present_modal()"
>
Present modal
</button>
</ion-content>
./src/pages/home/home.scss :
page-home {
}
./src/pages/home/home.ts :
import { Component } from '#angular/core'
import { DefaultModal } from '../../modals/default/default.modal'
import { GlobalProvider } from '../../providers/global.provider'
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
private _global_provider : GlobalProvider
)
{
}
present_alert()
{
let alert = this._global_provider.alert_controller.create(
{
title: 'Alert title'
, subTitle: 'Alert subtitle'
, buttons:
[
'Dismiss'
]
}
)
alert.present()
}
present_modal()
{
let modal = this._global_provider.modal_controller.create(
DefaultModal
, {
title : 'Modal title'
, global_provider_names : Object.keys(
this._global_provider
)
}
)
modal.present()
}
}
Global provider
./src/providers/global.provider.ts :
import {Injectable} from '#angular/core'
import {AlertController} from 'ionic-angular'
import {ModalController} from 'ionic-angular'
import {ToastController} from 'ionic-angular'
#Injectable()
export class GlobalProvider
{
constructor(
public alert_controller : AlertController
, public modal_controller : ModalController
, public toast_controller : ToastController
)
{
}
}
Hope this helps!