在 Angular 路由器上传递状态中的 Observable

Question

将 Ionic 与 Angular 8.

一起使用

我想像这样发送 Observable：

let request: Observable<any> = return this.http.get('some url');

从一个组件到另一个：

this.router.navigate(['confirm'], {state: {req: request}})

Bun 我尝试在此组件中路由时遇到错误

DataCloneError: Failed to execute 'pushState' on 'History',

我如何在组件中传递Observable？

Answer 1

这无法完成，因为无法将可观察对象转换为字符串。请参阅文档中的示例：

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]); 
// is converted to the url 
// --> localhost:4200/heroes;id=15;foo=foo

你如何将一个可观察对象转换成一个简单的字符串？如果可能的话，它会导致很长的 url。但是可观察的是 Javascript 代码，所以它需要是 evaluated。这将为将恶意代码插入您的应用程序的攻击打开大门，因此 angular 严禁这样做。（事实上，您使用 Ionic 并没有改变这一点！）

TLDR：查询参数不适用于复杂的逻辑。将其存储在服务等中，并在两个组件中重复使用

Passing Observable in state on Angular Router