javascript - Ionic 2 Modal 不会关闭

Question

我正在尝试关闭 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;
}

Answer 1

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

您可以通过在 DynamicModalComponent 的构造函数中注入(inject) Injector 来要求注入(inject)器获取 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的构造函数中注入(inject)ViewController并让Angular为你处理事情。

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

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