我们可以在Angular 4中进行路由时发送对象

Question

当Angular 4中的路径发生变化时，我试图传递对象。基本上，我试图模仿可以使用Angular JS中的UI路由器实现的功能。我以前的应用程序使用UI路由器模块为Angular JS进行路由和导航。

通过使用$state.go()方法提供状态和对象，我能够路由到URL。

传递给路径的对象可以使用$ stateParams检索，并且可以在Controller中用于该路由。使用Angular 4默认路由器实现此功能，我相信是不可能的。

在Angular 4中进行路由时，是否有一种方法可以传递对象，并且激活的组件可以检索这些对象。

当用户硬刷新页面时，共享服务是否会丢失其数据？另外，您对使用UI路由器有何看法。

Answer 1

我认为在路由上传递一个对象是一个安静的坏主意。

我正在使用＆＃34;共享服务＆＃34;在路由时将对象从一个组件传递到另一个组件。

例如，使用该对象的getter和setter构建Share-Service，并在路由到新Component时设置它，并在初始化新Component时从该服务获取它。

该服务应该在这两个组件所在的父模块中提供。

Answer 2

自Angular Router 7.2起，您可以将其作为NavigationExtras发送并从窗口历史记录中检索。

this.router.navigate(['/foo'], {state: {bar: {...}}});

甚至

<a [routerLink]=”/foo” [state]=”{ bar: {...}}”>Foo</a>

您可以在导航完成后从历史对象获取数据

history.state.bar

这是否是个好主意，我不能说， 参见https://medium.com/ableneo/how-to-pass-data-between-routed-components-in-angular-2306308d8255 和https://angular.io/api/router/NavigationExtras#state

了解更多信息。