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

我想从一个组件导航到另一个组件并将一些数据导航到它。Angular导航到组件并绑定其数据

下面是代码：

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

在SomeComponent我追赶的路线PARAMS这样的：

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

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

我想避免路由参数。

什么是正确的方式来导航到SomeComponent并发送它的值将被用于里面并绑定到this.name例如。

这两个组件不在父子关系中。

来源

2017-07-18 eomeroff

你是什么意思的“网址看起来不好”？网址是什么样的？ –

这是旁边的事情，url的外观不那么重要。我想我正在寻找相当基本的东西。导航到组件并在其公共属性上设置一些数据。 – eomeroff

如果您想在组件之间共享数据，因为共享服务是没有父母子女关系的最常见情形：https：//angular.io/guide/component-interaction#parent-and-children-communicate- via-a-service您只需要使用（例如）'BehaviorSubject'而不是'Subject'。 – Alex

难道是空间转换为％20吗？
如果是这样的默认URL编码。
检查this了。
从句法上看，你所得到的似乎与我从here得知的一致。
也许您需要购买URL Encode？

encodeURI('Some Name')

来源

2017-07-18 16:26:11 JGFMK

有没有办法避免路线参数。如果我需要发送整个对象，该怎么办？ – eomeroff

您有几个选项。发送ID并使用服务从您的域模型中查找数据。或者将对象存储在cookie中并再次检索它。但是，如果客户端浏览器禁用了Cookie，则可能会破坏该方法。还有LocalStorage。尽管您可以存储金额上限。 Google的“本地存储大小限制”LocalStorage和SessionStorage最多可以使用10MB的存储空间，但实际上它们是两者的总和。对于IndexedDB，您可以在桌面上使用高达50MB，免费使用手机上的5MB。但是，用户可以允许通过授予权限去除限制 – JGFMK

https://stackoverflow.com/a/45166499/495157我给这里的cookie解决方案btw – JGFMK

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

回答

相关问题