如何在不相关的页面之间传输数据？Angular 8答案

【问题标题】：How to transfer data between unrelated pages?Angular 8如何在不相关的页面之间传输数据？Angular 8
【发布时间】：2019-11-25 11:56:00
【问题描述】：

我正在 Angular 8 上开发一个应用程序。我将其设为多页，并通过路由器传递参数。我需要将数据从一个页面传输到另一个页面，如果我的页面没有以任何方式连接，我该怎么做？所有页面都通过路由器插座加载。

不使用 parent.component -> child.component 嵌套是不好的做法吗？

因为将来我需要将数据深入传输到我的图书馆的应用程序中。示例 <my-library [data]="data"></my-library>

路线

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'progects/:id', component: ProgectsComponent},
  { path: 'progect/:id', component: ProgectComponent},
  { path: 'polls', component: PollsComponent},
  { path: 'poll/:id', component: PollComponent},
  { path: '**', redirectTo: '/' }
];

【问题讨论】：

您可以为此使用服务。例如，您可以定义一个主题，每次您必须传递数据时，您都会使用yourSubject.next() 发出该主题，并在您订阅它的其他页面上收听它。
angular 提供了不同的组件交互方式，请阅读这里：angular.io/guide/component-interaction
您可以根据需要将其存储在本地或会话存储中。

标签： angular

【解决方案1】：

有很多方法可以在不同组件之间传输数据。选择的选择可能因您的目标而异。

父母对孩子：@Input()decorator
孩子到父母：@Output() 和 EventEmitter
孩子到父母：@ViewChild()
不相关的组件：将数据共享为服务。

您需要创建一个服务来在不同组件之间共享数据。

您可以查看此article 以开始使用。

【讨论】：

但是服务可以与关闭的页面交换数据吗？交换组件不应该在同一页面上吗？
为什么要在关闭页面和打开页面之间共享数据？关闭的页面没有任何数据。当您打开该页面时，数据就会出现。因此，您应该在打开的组件中调用与关闭的组件相同的服务（如果您正在使用）。
非常感谢！它有帮助！现在，我需要以某种方式将数据传输到我的服务。例如，我将有一个将写入属性的库，例如。如何将 id-region 传递给我的服务？这样我就可以在整个项目中使用这个 id。
<my-library [id-region]="12312313"></my-library> 这是父子交互的格式。您只能使用 @Input() 装饰器来做到这一点。这种情况不需要使用服务。

【解决方案2】：

您可以通过三种方式传输数据。

使用 Router.navigate()

this.router.navigate(['/polls'], {
  state: {
      data: "some data which you want"
  }
});

并通过this.router.getCurrentNavigation().extras.state 将其放入 PollsComponent 但是YOU NEED TO GET THE DATA INTO CONSTRUCTOR of PollsComponent，在 angular lifehooks 上它不存在，因为它在路由器事件 NavigationEnd 之前一直存在。

使用查询参数

this.router.navigate(['/polls'], {
  queryParams: {
      data: "some data which you want"
  }
});

并通过ActivatedRoute.snapshot.queryParams 将其放入 PollsComponent

使用单例服务只需拥有providedIn: root 的服务并按属性存储它

但刷新后或用户删除queryParams（#2方式）后数据会丢失。

注意：

我会推荐你使用像poll/:id这样的参数并在 PollComponent onInit 方法中获取 id 并使用该 ID 从中获取数据。在这种情况下，您可以在ActivatedRoute.snapshot.params 中获取:id

【讨论】：