扩展 Ionic2 并注入 ModalController

Question

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

我有一个包含组件的 NgModule，我将 IonicModule 注入其中，以便它可以使用 ionic2 的所有 components/directives。

@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”。我猜它找不到要显示的应用程序。

我也在猜测我需要将可以运行的 ACTUAL APP 传递给 forRoot，但我不知道该怎么做。

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

Answer 1

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

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

Answer 2

这个问题的解决方案是扩展 ionic 中的特定组件，以表明我的组件是其自身类型的模态。

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

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

代理的呈现功能是应用程序本身告诉它显示所述 viewcontroller 的呈现功能。

所以要修改

将组件扩展为 viewcontroller:

export class MyComponent extends ViewController

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

constructor(private _app:App){}

在应用程序上显示您的新组件

this.app.present(this);

现在可以显示模态了。

扩展 Ionic2 并注入 ModalController

Extending Ionic2 and injecting ModalController

typescript

ionic2

ng-modules

angular