Ionic 5中如何向Popover传递数据？

其实Ionic 5里的Popover数据传递逻辑和Ionic 3是相通的，只是API做了更贴合Angular规范的调整，官方文档没单独拎出来讲确实容易让人困惑，我给你拆解下具体步骤：

1. 创建Popover时传递数据 #

在Ionic 5中，PopoverController.create()方法的第二个参数是配置对象，我们需要把要传递的数据放到componentProps字段里，而不是像Ionic 3那样直接传数据对象。举个例子：

// 父组件中的代码
import { PopoverController } from '@ionic/angular';
import { PopoverPage } from './popover.page';

// ...

async openPopover(event: Event) {
  // 创建Popover实例，通过componentProps传递数据
  const popover = await this.popoverController.create({
    component: PopoverPage,
    event: event, // 绑定触发Popover的事件（比如点击事件）
    componentProps: {
      userName: 'Cedric',
      userAge: 28
    }
  });

  await popover.present();
}

2. 在Popover页面接收数据 #

Ionic 5更推荐使用Angular的@Input()装饰器来接收传递的数据，这比之前的NavParams更符合组件化的设计思路。具体代码如下：

// PopoverPage组件的代码
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-popover',
  template: `
    <ion-content class="ion-padding">
      <h3>用户信息</h3>
      <p>姓名: {{ userName }}</p>
      <p>年龄: {{ userAge }}</p>
    </ion-content>
  `
})
export class PopoverPage {
  // 用@Input()声明要接收的参数
  @Input() userName: string;
  @Input() userAge: number;

  constructor() {}
}

兼容旧方式：用NavParams接收 #

如果你习惯了Ionic 3的写法，Ionic 5依然支持通过NavParams获取数据，只是官方不推荐这种方式了，示例代码如下：

// PopoverPage组件中用NavParams接收
import { Component } from '@angular/core';
import { NavParams } from '@ionic/angular';

@Component({
  // 模板同上
})
export class PopoverPage {
  userName: string;
  userAge: number;

  constructor(private navParams: NavParams) {
    // 通过get方法获取传递的数据
    this.userName = this.navParams.get('userName');
    this.userAge = this.navParams.get('userAge');
  }
}

总结一下，核心就是把原来直接传入的数据包到componentProps里，然后用@Input()接收，逻辑和之前一致，只是写法更规范了~

内容的提问来源于stack exchange，提问作者Cedric Ipkiss