在Ionic 4中,我试图使用modalController
打开模式。我可以打开模式并发送componentProps
,但是我不确定如何接收这些属性。
这是我打开模态组件的方法:
async showUpsert() {
this.modal = await this.modalController.create({
component:UpsertComponent,
componentProps: {test: "123"}
});
return await this.modal.present();
}
我的问题是;在实际模态中,如何将
test: "123"
转换为变量?
最佳答案
您可以在需要的组件中使用“输入组件交互”来获取这些值,例如:
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的模态组件中,您可以采用以下参数:
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-framework - Ionic 4如何接收componentProps?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51989882/