扩展Ionic2并注入ModalController

时间:2016-10-17 13:43:55

标签: angular typescript ionic2 ng-modules

我正在尝试开发一个可用于任何项目的datepicker组件。

我有一个包含组件的NgModule,我将IonicModule注入其中,因此它可以使用ionic2的所有组件/指令。

@NgModule({
    imports: [
        CommonModule,
        IonicModule.forRoot(DatePickerModule)
    ],
    exports: [DatePickerComponent, DatePickerDirective],
    entryComponents: [DatePickerComponent],
    declarations: [DatePickerComponent, DatePickerDirective],
    providers: [DateService, nls]
})
export class DatePickerModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DatePickerModule
        };
    }
};

其中一个组件注入离子模态控制器以显示模态。

export class MainDirective{
  public static config:any;
    constructor(private modalCtrl:ModalController) {
    }
    openModal() {
        this.modalCtrl.create(DatePickerComponent
        ).present();
    }
}

这个NgModule被导入到另一个应用程序中,我试图调用openModal。 这是我导入的方式

@NgModule({
  imports: [
    IonicModule.forRoot(App),
    DatePickerModule.forRoot(),
],
})

它会发生错误' _getPortal'来自离子角库的未定义。 我猜它无法找到要显示的应用程序。

我也猜测我需要传递给权限的ACTUAL APP,但我不知道如何做到这一点。

解决此问题的最佳方法是什么?

2 个答案:

答案 0 :(得分:1)

您只应在根模块上调用forRoot。此调用设置了一堆应用程序提供程序,只应在引导Ionic时执行。你应该做的只是导入IonicModule(没有forRoot)。

对于ModalController,当您在根模块中导入IonicModule.forRoot时已经提供了它,因此您无需担心尝试添加它。如果你想添加它,你可以,但它依赖于Ionic App,它仅在你引导时可用。实际上,尝试添加它是多余的。

答案 1 :(得分:0)

这个解决方案是扩展离子中的特定成分,以表明我的成分是它自己的一种模态。

将模态控制器注入外部组件太过于无效,在我看来不应该这样做,因为你的组件不是模态的。

对于任何将要显示的内容,ViewController应该被扩展,因为这是每次执行当前函数时显示的基类类型。

代理的当前功能是应用程序本身告诉它显示所述视图控制器的当前功能。

所以要修改

将组件扩展为viewcontroller:

export class MyComponent extends ViewController

将应用程序注入构造函数

constructor(private _app:App){}

在应用上显示您的新组件

this.app.present(this);

现在可以显示模态。