inheritance - 使用 Typescript 在 Angular 2 中的组件之间共享行为

Question

我目前正在使用 Typescript 开发 Angular 2 项目。

我有几个共享相同行为的组件:它们都能够显示一个加载器(取决于它们是否正在获取一些数据)、一个错误屏幕(如果获取失败)，并且它们都订阅了相同的服务(获取数据的服务)。此服务每 30 秒刷新一次数据，组件订阅者对新数据执行几乎相同的操作。

我找不到分享这种行为的好方法。

我尝试使用 typescript 中的 mixins，但首先，我无法覆盖我在组件中的 mixin 中声明的方法，其次，我仍然必须在我的组件中声明没有任何内容的方法，所以我的编译器不会提示。

我也尝试过使用装饰器，但我的编译器报错，因为它找不到装饰器中声明的方法。

我最终尝试将 typescript 继承与父组件一起使用，它没有任何模板，它只是一个父类，我将它与“扩展 ParentComponent”一起使用，并将我所有的逻辑放在 ParentComponent 中。最后一种方法是最简单的方法，但我有一种强烈的感觉，这绝对不是好方法(组合优于继承等)

有没有办法正确地做到这一点？我来自 ruby​​ on rails，像 ruby​​ 中的“关注点”这样的东西会很棒。

Answer 1

创建一个包含路由器导出的 ParentComponent 以将独特的行为保存为 (ChildComponents) 并通过共享服务共享数据模型。

还结合了延迟加载(使用 loadchildren 的路由)来获取模块特定的共享服务。