angular - Ionic 4 - 如何使用 navCtrl 或 Router 服务在页面之间传递数据

Question

在 Ionic 3 中，您可以使用 navController 的第二个参数将数据传递到下一页并使用 navParams 服务检索它。

这是一个非常方便的功能。 Ionic 4 中是否有等效的路由 api？

你总是可以将对象/数组 JSON.stringify 到 routerParams，在我看来这不太方便。

在 Ionic 4 中，您可以使用 ComponentProps 和 @Input() 通过 modalController 传递数据，使其更适合快速推送/弹出实现。

编辑

我提出这个问题的目的是找出是否有任何来自 Angular 6+ 或 Ionic 4+ 的原生 API。我很清楚实现自定义服务或解析器来实现此目的的方法。

目标是充分利用 ionic 和 angular 的 api，因为在较大的项目中，每个自定义代码都需要文档并增加了复杂性。

Answer 1

在 Ionic v4/Angular 7.2+ 中，有多种方法可以将参数从一个页面传递到另一个页面:

<强>1。使用 Extras 状态(自 Angular 7.2 起新增) - 推荐

简单干净

// original page
let navigationExtras: NavigationExtras = { state: { foo: this.foo } };
this.router.navigate(['destination-path'], navigationExtras);
// destination page
constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.foo= this.router.getCurrentNavigation().extras.state.foo;
      }
    });
  }

<强>2。使用服务和解析器

不影响数据但有点重。

将数据存储到服务中并使用路由器传递解析器

<强>3。使用对象的 id(不推荐)

如果你的对象被存储了，你可以在url中传递id并再次获取它。

它会减慢应用程序，暗示对象存储在某个地方并且可能会增加网络问题(如果没有存储在本地)

<强>4。使用查询参数(不推荐)

通过 stringyfing 你的对象:查看@Tahseen Quraishi 的回答

只能传递很少的信息，而且URL很丑

Some examples here