让Ionic2控制器全球化

Question

我的App中的几个地方需要alertCtrl: AlertController, sanitizer: DomSanitizer, modalCtrl: ModalController, toastCtrl: ToastController。有没有办法让它们全局可用，或者我真的必须通过所有类转发它们，在我的情况下通过4个构造函数？

Answer 1

如果在模块中声明提供程序，它们将被转发到此模块下的所有组件。然后，如果您在app.module中声明它们，则可以将它们视为全局。

如果你想要的是import它们不是需要它们的每个组件，我看到的唯一选择是将它们包装成factory provider或自定义的，然后只导入这个新的提供者：

编辑：编码

全球提供商示例

测试环境：

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

应用

./ 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 {}

模态

./ 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"
            )
        }
    }
}

主页

./ 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()
    }
}

全球提供商

./ 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
    )
    {
    }
}

希望这有帮助！