如何在Angular 13路由状态间传递函数？

普通数据传递方式 #

在Angular 13中，路由状态间传递普通数据可通过以下方式实现：

传递数据的代码：

this.router.navigate(["/news"], { state: { somevalue: 1 } })

在目标组件的构造函数中读取该数据：

this.router.getCurrentNavigation().extras.state.somevalue

传递函数的尝试与报错 #

若尝试在路由状态间传递函数，比如使用如下写法：

this.router.navigate([url], { state: { somevalue: () => { console.log("test") } } })

会触发以下错误：

Error: Uncaught (in promise): DataCloneError: Function object could not be cloned.

这是因为路由state中的数据会被执行序列化（克隆）操作，而函数属于不可克隆的对象类型，因此无法通过这种方式传递。

内容的提问来源于stack exchange，提问作者Martin Eckleben