Ionic 4如何接收componentProps? [英] Ionic 4 how do I receive componentProps?

问题描述

在Ionic 4中，我试图使用modalController打开模式.我可以打开模式并发送componentProps，但是我不确定如何接收这些属性.

In Ionic 4, I am trying to use the modalController to open a modal. I am able to open the modal and send componentProps, but I'm not sure how to receive those properties.

这是我打开模态组件的方式:

Here's how I open the modal component:

async showUpsert() {
  this.modal = await this.modalController.create({
    component:UpsertComponent,
    componentProps: {test: "123"}
  });
  return await this.modal.present();
}

我的问题是；在实际模态中，如何将test: "123"转换为变量?

My question is; in the actual modal, how do I get test: "123" into a variable?

推荐答案

您可以在需要的组件中通过输入组件交互来获取这些值，例如:

You can take those values with Input Component Interaction in the component you will need it, for example:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TestComponent } from '../test/test.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(public modalController: ModalController){}
  async presentModal() {
    const modal = await this.modalController.create({
      component: TestComponent,
      componentProps: { value: 123, otherValue: 234 }
    });
    return await modal.present();
  }
}

在带有Input的模态组件中，您可以采用这些参数:

In your modal component with Input you can take those params:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  @Input("value") value;
  @Input() otherValue;
  constructor() { }

  ngOnInit() {
    //print 123
    console.log(this.value);
    //print 234
    console.log(this.otherValue);
  }
}

这篇关于Ionic 4如何接收componentProps?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！