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

Posted 2023-02-22

【中文标题】使用 Typescript 在 Angular 2 中的组件之间共享行为

【英文标题】：Sharing behaviour between components in Angular 2 with Typescript

【发布时间】：2017-03-23 02:26:16

【问题描述】：

我目前正在使用 Typescript 进行 Angular 2 项目。

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

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

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

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

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

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

【问题讨论】：

那么您到底想分享什么？模板？组件类？

【参考方案1】：

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

还包含延迟加载（使用 loadchildren 路由）以获取特定于模块的共享服务。