Ionic 2 Modal 不会关闭答案

【问题标题】：Ionic 2 Modal does not dismissIonic 2 Modal 不会关闭
【发布时间】：2018-01-06 08:52:15
【问题描述】：

我正在尝试在 ionic 2 中关闭我的模态。

我的组件看起来像这样：

export class DynamicModalComponent<T extends IHasId> {

    modalOptions: DynamicModalOptions<T>

    constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.modalOptions = navParams.get('modalOptions');
    }

    close() {
        this.modalOptions.viewCtrl.dismiss();
    }
}

我的 html 看起来像这样：

<ion-header>
  <ion-navbar align-title="center">
    <ion-title> Dynamic Modal Header </ion-title>
    <ion-buttons end>
      <button (click)="close()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Cancel
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

当我单击取消按钮时，我的函数被触发，但没有任何内容被关闭。我认为问题不会出在调用类中，而只是以防万一发布相关部分：

constructor(public navCtrl: NavController, public viewCtrl: ViewController, public navParams: NavParams, public baseProvider: UserSkills,
    public enumProvider: Enums, public modalCtrl: ModalController, routes: Routes) {
}

showModal(modalOptions: DynamicModalOptions<UserSkill>) {
    let modal = this.modalCtrl.create(DynamicModalComponent, { modalOptions });
    modal.present();
    return modal;
}

onItemClick(entity) {
    var modalOptions = this.getDynamicModalOptions(entity);
    this.showModal(modalOptions);
}

getDynamicModalOptions(entity: UserSkill): DynamicModalOptions<UserSkill> {
    var modalOptions = new DynamicModalOptions<UserSkill>();

    modalOptions.entity = entity;
    modalOptions.editOptions = this.editOptions;
    modalOptions.inputMetadata = this.getInputMetadata(); 
    modalOptions.viewCtrl = this.viewCtrl;

    return modalOptions;
}

【问题讨论】：

getDynamicModalOptions 会以这种方式调用吗？我不确定是否需要耦合ViewController，因为您始终可以将其注入DynamicModalComponent的构造函数中
真的，我要调查一下，因为 ViewController 和 NavController 很特殊，它们不能轻易注入提供程序，这段代码最初是通过提供程序完成的，但我将其提取到组件中
@OluwafemiSule 已修复，如果您将其作为答案发布，我会将其标记为正确！
是的，问题是您传递了错误的 ViewController 实例。您传递的是调用者的 ViewController 的实例，而不是代表模式的 ViewController。因此viewCtrl.dismiss();没有做任何事情（因为模态存在于DynamicModalComponent 而不是调用者组件中）。解决此类问题的另一种方法是使用注入器 (public injector: Injector) 在 DynamicModalComponent 组件上获取正确的实例 (viewCtrl = this.injector.get(ViewController);)

标签： javascript html angular typescript ionic2

【解决方案1】：

正如@sebaferras 所指出的，这里传递了错误的 ViewController 实例。

您可以通过在DynamicModalComponent 的构造函数中注入Injector 来要求注入器获取正确的ViewController 实例。这样ViewController就可以在ngOnInit中解析了。

constructor(public navCtrl: NavController, 
            public navParams: NavParams, 
            private injector: Injector) {
  this.modalOptions = navParams.get('modalOptions');
}

ngOnInit() {
  this.viewCtrl = this.injector.get(ViewController);
}

close() {
  this.viewCtrl.dismiss();
}

更好的技术是在DynamicModalComponent 的构造函数中注入ViewController 并让Angular 为您处理。

constructor(public navCtrl: NavController, 
            public navParams: NavParams, 
            private viewCtrl ViewController) {
  this.modalOptions = navParams.get('modalOptions');
}

close() {
  this.viewCtrl.dismiss();
}

【讨论】：