在Ionic 5中,要将数据传递给popover,可以通过以下步骤实现:
ionic generate component MyPopover
这将在src/app目录下创建一个名为my-popover的组件。
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-my-popover',
templateUrl: './my-popover.component.html',
styleUrls: ['./my-popover.component.scss'],
})
export class MyPopoverComponent implements OnInit {
@Input() data: any;
constructor() { }
ngOnInit() {
console.log(this.data);
}
}
在my-popover.component.html中,根据需要展示传递的数据:
<ion-content>
<ion-list>
<ion-item *ngFor="let item of data">
{{ item }}
</ion-item>
</ion-list>
</ion-content>
import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';
import { MyPopoverComponent } from '../my-popover/my-popover.component';
@Component({
selector: 'app-my-page',
templateUrl: './my-page.component.html',
styleUrls: ['./my-page.component.scss'],
})
export class MyPageComponent implements OnInit {
dataToPass: any[] = ['Item 1', 'Item 2', 'Item 3'];
constructor(private popoverCtrl: PopoverController) { }
ngOnInit() { }
async presentPopover(ev: any) {
const popover = await this.popoverCtrl.create({
component: MyPopoverComponent,
componentProps: {
data: this.dataToPass
},
event: ev
});
return await popover.present();
}
}
在my-page.component.html中,添加一个按钮或任何需要触发popover的元素,并在其click事件中调用presentPopover方法:
<ion-button (click)="presentPopover($event)">Open Popover</ion-button>
通过以上步骤,当按钮被点击时,一个popover将被创建并显示,其中包含传递的数据。
对应腾讯云相关产品和产品介绍链接地址:
请注意,以上仅为腾讯云相关产品的示例,实际应用中应根据具体需求选择合适的云计算产品和服务提供商。
领取专属 10元无门槛券
手把手带您无忧上云