我有一些看起来相似的组件，具有相同的用途，具有相同的样式，但是它们必须根据所使用的模块实现略有不同的行为。现在这些是不同的组件，但是我不确定是否我通过多次复制和粘贴一个组件并进行小的更改以实现其行为和布局的微小更改，这是正确的。
如果它是简单的 TypeScript，我只会扩展基类并做我需要的任何东西，但有时我也需要对 html 布局做一些小改动。
有没有一种方法可以概括我的组件（例如表格组件）并使其能够根据我的需要实现不同的行为？
【问题讨论】：
标签： angular typescript oop inheritance
打开app-routing.module.ts，假设我们有这些：
// ...component imports
const routes: Routes = [
{ path: '', component: PageoneComponent },
{ path: 'pageone', component: PageoneComponent },
{ path: 'pagetwo', component: PagetwoComponent },
{ path: 'pagethree', component: PagethreeComponent }
];
打开每个页面组件并使用BaseComponent 扩展它：
export class PageoneComponent
extends BaseComponent
implements OnInit {
// ...
}
除了添加路由器并使用 super 将其注入BaseComponent 构造函数：
constructor(public router: Router) {
super(router);
}
这将采用注入的路由器模块并将其传递给扩展组件。
由于从基础组件传递的继承，在基础组件上定义的任何内容都可用于扩展它的所有组件。
【讨论】：
是的，但没有通用的配方。您必须自己设计组件，最大限度地提高组件的通用性，以实现组件的富有成效的重叠。
您可以使用的构建块是：
Input / Output 当然是属性。想一想组件的数据和配置可以通过参数而不是硬编码传递的所有方式。
<ng-content>：您可以允许内容注入。这样，您不必在进行细微更改时重写组件。将其与ng-content select 结合使用，可以仅自定义显示的某些部分。更多详情here for example。
使用ngIf*、ngSwitch*、ng-container、ng-template 等。它允许根据组件配置变量显示不同的 HTML 代码。这样，您通常可以只使用一个组件用于不同的最终用途。 （例如：一个ControlComponent，可以是复选框、文本字段等）。
使用所有这些工具，您可以愉快地思考重用代码的最佳方式。您应该以无代码复制为目标（以DRY为目标）。
【讨论】：
您可以拥有一个通用的可重用组件，例如 TableComponent。
您可以在任何需要的地方继承组件，并传递所需的参数和事件处理程序以根据您的需要对其进行自定义。
<table-comp [data]="arguments" (eventHandler)="FunctionName()">
</table-comp>
【讨论】：