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

标签 inheritance angular typescript components composition

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

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

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

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

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

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

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

最佳答案

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

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

关于inheritance - 使用 Typescript 在 Angular 2 中的组件之间共享行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40504229/

相关文章:

binding - 路由器导出的 Angular 2 输出

angular - 在 Angular4+ 中插入插入符号

angular - 在执行以下代码执行之前,如何等待函数在 Angular 6 中完成执行?

reactjs - 当使用react-router-dom v6时,我还需要这个@types/react-router-dom包吗?

inheritance - 在集合中混合共享同一接口(interface)的不同枚举

javascript - 使用 Javascript 继承?如何获取 'super' 或 'base'

Angular2 RC5 : Can't bind to 'Property X' since it isn't a known property of 'Child Component'

typescript - TypeScript Vue 组件中的泛型

c# - 为什么带有 Object 的代码在带有 Object 的相同代码工作时无法编译?

java - 可运行的子类,普通的父类(super class),如何运行子类?