Angular 2+将"零部件"延伸两个其他零部件

Question

假设我们有一个应用程序，它有很多列表，因此有一些基本组件

export class SimpleListComponent { ... }
export class ExtendedListComponent extends SimpleListComponent { ... }

我们可以很容易地扩展它。它们承载了我们列表的所有基本功能(例如切换页面、计数结果…)。我们将这两个基本组件用于两个不同的英雄列表：

export class HeroSimpleListComponent extends SimpleListComponent { ... }
export class HeroExtendedListComponent extends ExtendedListComponent { ... }

不幸的是，我们仍然需要复制大量代码，因为HeroSlimListComponent和HeroExtendedListComponent共享许多功能(例如加载英雄、路由到英雄…)

我的第一次尝试是通过我们需要扩展的课程

export class ExtendedListComponent<T = SimpleListComponent> extends T { ... }

但这并不奏效。此外，我发现这篇文章指出，在typescript中不可能有多重继承。我仍然觉得我缺少了一些基本的角分量连接的解决方案。

提前感谢您的帮助！

Answer 1

你是对的，多重继承是不可用的(不幸的是，因为它非常酷)。

可能性1您的常见操作似乎可以位于简单列表组件内部，并且您可以在构造函数中的扩展组件(如路径)中提供所需的属性。当您调用super()时，可以向下传递配置选项。

export class SimpleListComponent {
constructor(
routePath: string,
) {}
}
// extending component
export class HeroSlimListComponent extends SimpleListComponent {
constructor() {
super('<my-route-path>');
}
}

可能性2可能值得查看混合！不过我还没有玩过这些，所以也许有一些经验的人可以参与进来？它们似乎不能完全解决问题，因为您仍然需要实现接口，但它可能是父组件的一组很好的通用功能。

可能性3(可能是我个人的最爱)保留泛型列表和扩展列表组件作为接受输入和给出输出的组件，而不扩展它们。相反，在html中使用它们。例如，导航路径可以传入，数据服务可以在父级组件提供，并注入到树中的子组件中。要配置列表项，可以传入模板引用(请参阅材料表示例)。这只是一个粗略的例子，需要优化，但现在来看：

// simple list component
// selector = simple-list
constructor(simpleListService: SimpleListService) {}
// hero simple list component
@Component({
....
providers: [
{ provide: SimpleListService, useClass: HeroSimpleListService },
],
})
// html
<simple-list [navPath]='heroNavPath' <...other templates / props>>

需要记住的是，您扩展的类中的每一段代码都会作为每个扩展组件中的重复代码再次添加到您的最终构建中(查看prod构建的输出，这有点有趣)。