如何将数据注入从路由器创建的 Angular2 组件中？

Posted 2023-02-23

【中文标题】如何将数据注入从路由器创建的 Angular2 组件中？

【英文标题】：How to inject data into Angular2 component created from a router?

【发布时间】：2016-01-23 08:15:42

【问题描述】：

我目前正在尝试为我们的 Angular1 应用程序（相当复杂的应用程序）构建一个 Angular2 原型（基于 alpha44），并且我正在尝试在使用路由和子路由时找到最佳模型/数据架构。

在我的示例中，从路由创建的子组件中，我想访问父组件的属性（托管 router-outlet）。

但是当你从router-outlet 创建一个组件时，你不能再使用@Input 和@Output。 那么注入一些数据/属性的最佳实践是什么，除了基本的routeParams 和静态的routeData？

如何在没有过多耦合的情况下与父组件通信？

【问题讨论】：

看this issue。 AFAIK 现在与router-outlet 的组件通信的唯一方法是使用 DI。

【参考方案1】：

您可以使用RouteData 将数据传递到路由中。请参阅 here 和 here。我仍然缺少从组件中初始化此数据 obj 的部分（参见my question）

【参考方案2】：

共享服务可以与路由器添加的组件一起使用。详情见https://angular.io/docs/ts/latest/cookbook/component-communication.html

data 支持也被添加到 RC.4 中的新路由器中。详情见How do I pass data in Angular 2 components while using Routing?

Angular 2 - equivalent to router resolve data for new router 也可能是相关的。

【参考方案3】：

您可以通过 Subject,Observable 将来自 Router Outlet 内的子组件的数据传递（注入）到父组件。您可以在 video 中找到我的解决方案。

查看 GitHub 上的代码：https://github.com/tabvn/angular-blog