角2+由其他两个组件延伸组件

Question

比方说，我们有很多列出的应用程序和一些为此基本组件

export class SimpleListComponent { ... }

export class ExtendedListComponent extends SimpleListComponent { ... }

......我们可以轻松地扩展。他们携带所有的基本功能，为我们的列表（例如开关页面，算结果，......）。我们用这两个基本组件英雄两种不同的列表：

export class HeroSimpleListComponent extends SimpleListComponent { ... }

export class HeroExtendedListComponent extends ExtendedListComponent { ... }

不幸的是，我们仍然会重复了很多我们的代码，因为HeroSlimListComponent和HeroExtendedListComponent分享了很多自己的functionalites（如负载英雄，路线英雄，...）。

我的第一个尝试是通过我们需要扩展类

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

但是，这并不工作。另外我发现this post其中指出，多重继承是不可能的打字稿中。我仍然有我在这里失去了一些基本的角度分量连接解决方​​案的感觉。

在此先感谢您的帮助！

Answer 1

你是正确的，多重继承是不具备的东西（很不幸，因为它会是超爽）。

可能性1好像你的共同行动能活的简单列表构件的内部，你可以提供在构造函数中的延伸部件（如路径）所需的性能。当你调用super（），该配置选项可以传递下去。

export class SimpleListComponent {
    constructor(
        routePath: string,
    ) {}
}

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

可能性2这可能是值得检查出mixins！我还没有与这些玩了，所以也许有人有一些经验可以有多重？他们似乎并不像他们想完全解决这个问题，因为你还必须实现该接口，但它可能是父组件的良好通用的功能集合。

可能性3（可能是我个人的最爱）保持泛型列表和扩展列表组件接受输入和输出，给予不扩展它们的组件。相反，在HTML中使用它们。例如，导航路径可以传递的，并且可以在父级别组件来提供数据服务，并注射到树中的子组件。要配置列表项，您可以在模板裁判（见material tables examples）通过。这只是一个粗略的例子，就需要优化，但在这里你去：

// 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>>

事情要记住的是，从你扩展一个类每一段代码被再次添加到您的最终版本在每个延长部件（检查出的输出督促建立，它还挺有趣的）重复的代码。