Angular 导航到组件并绑定其数据答案

【问题标题】：Angular navigate to component and bind its dataAngular 导航到组件并绑定其数据
【发布时间】：2017-12-23 15:17:25
【问题描述】：

我想从一个组件导航到另一个组件以及一些数据。

代码如下：

this.router.navigate(['some-component', { name: 'Some Name' }]);

在 SomeComponent 我捕捉到这样的路由参数：

this.route.params.subscribe(params => {
   //assign it to some component member, like
   this.name = (JSON.parse(params))['name'];
});

这可行，但它并没有给我信心，在页面导航到 SomeComponent 视图后，url 看起来很糟糕，并且在页面重新加载后它不会保持状态。

我想避免使用路由参数。

例如，导航到 SomeComponent 并向其发送将在内部使用并绑定到 this.name 的值的正确方法是什么。

这两个组件不是子/父关系。

【问题讨论】：

“网址看起来很糟糕”是什么意思？网址是什么样的？
这是次要的事情，url 看起来不太重要。我想我正在寻找非常基本的东西。导航到组件并在其公共属性上设置一些数据。
如果你想在组件之间共享数据，因为共享服务是最常见的没有父子关系的场景：angular.io/guide/…你只需要使用（例如）@987654324 @ 而不是 Subject。

【解决方案1】：

可能是空间被转换为 %20 吗？
如果是这样，那是默认的 URL 编码。
签出this。
从语法上讲，您所掌握的似乎与我从 here 学到的一致。
也许你需要URL Encode？

encodeURI('Some Name')

【讨论】：

有没有办法避免路由参数。如果我需要发送整个对象怎么办。
您有几种选择。发送 id 并使用服务从您的域模型中查找数据。或者将对象存储在 cookie 中并再次检索它。但是，如果客户端浏览器禁用了 cookie，它可能会破坏这种方法。还有本地存储。尽管您可以存储的数量有上限。谷歌“localstorage 大小限制” LocalStorage 和 SessionStorage 最多可以使用 10MB 的存储空间，但这个数字实际上是两者的总和。对于 IndexedDB，您最多可以在桌面上使用 50MB，在移动设备上免费使用 5MB。但是，用户可以通过授予权限来取消限制
感谢您的解释 :) 非常友好。我想我会使用 id 并再次检索它。我不敢相信 Angular 在这里没有选择。
还有别的东西。 InputBinding.. 试试这个 angular.io/guide/component-interaction#!#bidirectional-service @Input() hero: Hero;在孩子和 [hero]="hero" 里面 *ngFor 的父母在他们的场景中。
谢谢，它不是子组件。我讨厌所有这些快乐的解释。但是当你遇到真正的问题时，你必须像 2009 年那样去做。