angular – Ionic 3：模态控制器 – 获取组件实例

发布时间：2020-12-17 08:46:59 所属栏目：安全来源：网络整理

导读：我通过ModalController显示一个Component EventFeedbackComponent.现在我想订阅EventFeedbackComponent中的Subject.如何访问组件实例,以实现我的目标. 我目前的代码： let modal = this.modalCtrl.create(EventFeedbackComponent);modal.present();// This i

我通过ModalController显示一个Component EventFeedbackComponent.现在我想订阅EventFeedbackComponent中的Subject.如何访问组件实例,以实现我的目标.

我目前的代码：

let modal   =   this.modalCtrl.create(EventFeedbackComponent);
modal.present();

// This is not working. Throws the error "ERROR TypeError: Cannot read property 'subscribe' of undefined"
modal._component.feedbackSubmit.subscribe(feedbackResponse => {
    console.log(feedbackResponse);
});

文档在这方面没有帮助：https://ionicframework.com/docs/api/components/modal/ModalController/

我的用例：

>我的服务中有一个事件列表,我需要获得反馈.
> EventFeedbackComponent具有控件以获取单个事件的反馈.
>现在,我展示EventFeedbackComponent以获取First Event的反馈并通过Subject监听事件feedbackSubmit
>提交反馈后,我会显示成功Toast并在Service中切换我的服务变量以显示下一个事件.
>重复上述点,直到我获得所有未审核事件的反馈,并通过模型显示相同的组件.

选项1解除params

离子模态组件使我们有机会用一些参数关闭对话：

modal.ts

constructor(public viewCtrl: ViewController) {
  this.prop = params.get('prop');
}

dismiss() {
  this.viewCtrl.dismiss({ test: '1' });
}

在揭幕战中我们应该：

opener.ts

let modal = this.modalCtrl.create(TestComponent,{ 'prop': 'prop1' });

modal.onDidDismiss(data => {
  alert('Closed with data:' + JSON.stringify(data));
});

如果这对你来说还不够

选项2通过ViewContainer.emit进行通信

您可以使用ViewController :: emit方法将数据发送到opener

modal.ts

constructor(public viewCtrl: ViewController) {}

sendFeedBack() {
  this.viewCtrl.emit({ someData: '2' });
}

opener.ts

let modal = this.modalCtrl.create(TestComponent,{ 'prop': 'prop1' });

modal.onDidDismiss(data => {
  alert('Closed with data:' + JSON.stringify(data));
});

modal.present().then(result => {
  modal.overlay['subscribe']((z) => {
    alert(JSON.stringify(z));
  })
});

选项3输入回调

既然我们可以将任何参数传递给模态,那么让我们传递回调函数：

opener.ts

let modal = this.modalCtrl.create(TestComponent,{ 
  'prop': 'prop1',onFeedBack: (data) => {
    alert('Input callback' + JSON.stringify(data));
  }
});

modal.ts

onFeedBack: Function;

constructor(params: NavParams) {
  this.onFeedBack = params.get('onFeedBack');
}

sentThroughInputCallback() {
  this.onFeedBack({ s: '2' });
}

如果您仍想获得组件实例,那么：

选项4获取组件实例

只有在创建组件实例后才能获取组件实例：

opener.ts

let modal = this.modalCtrl.create(TestComponent,{ 'prop': 'prop1' });

modal.present().then(result => {
  const testComp = modal.overlay['instance'] as TestComponent;
  testComp.feedbackSubmit.subscribe(() => {
    alert(1);
  })
});

在Ng-run Example上查看

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!