扩展 Ionic2 并注入 ModalController

Question

我正在尝试开发一个可用于任何项目的日期选择器组件。

我有一个包含组件的 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(),
],
})

发生的情况是它从 ionic-angular 库中抛出未定义的错误“_getPortal”。 我猜它找不到要显示的应用程序。

我也猜想我需要将可以运行的实际应用程序传递给 forRoot，但我不知道该怎么做。

解决这个问题的最佳方法是什么？

Answer 1

解决方案是扩展 ionic 中的特定组件，以表明我的组件是它自己的模态。

将模态控制器注入到外部组件中效率太低，我认为不应该这样做，因为您的组件不是模态的。

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

代理呈现函数是应用程序本身告诉它显示所述视图控制器的呈现函数。

所以要修改

将组件扩展为视图控制器：

export class MyComponent extends ViewController

将应用程序注入到您的构造函数中

constructor(private _app:App){}

在应用上显示您的新组件

this.app.present(this);

现在可以显示模态了。

Answer 2

您应该只在根模块上调用forRoot。这个调用设置了一堆应用程序提供者，这应该只在引导 Ionic 时完成。你应该做的只是导入IonicModule（没有forRoot）。

ModalController 在根模块中导入IonicModule.forRoot 时已经提供，因此您无需担心尝试添加它。如果你想添加它，你可以，但它依赖于 Ionic App，它只在你引导时可用。所以真的，尝试添加它是多余的。