Question

我有一些看起来相似，用途相同，样式相同的组件，但是根据所使用的模块，它们必须实现略有不同的行为。现在，这些组件是不同的，但是我不确定是否我做对了，可以多次复制和粘贴一个组件，并进行一些小的更改以实现其行为和布局的小的更改。

如果它是简单的TypeScript，我将扩展基类并进行所需的操作，但是有时我也需要对html布局进行一些小的更改。

有没有一种方法可以概括我的组件（例如表组件）并使其能够根据需要实现不同的行为？

Answer 1

打开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);
}

这将采用注入的路由器模块并将其传递到扩展组件中。

由于从基本组件传递了继承，因此在基本组件上定义的所有内容都可用于对其进行扩展的所有组件。

请参阅component-inheritance

的全文

Answer 2

是的，但是没有通用的配方。您必须自己设计组件，以最大程度地提高组件的通用性，以使组件充实地发挥作用。

您可以使用的构建基块是：

file2.txt / Input属性。想一想可以通过参数而不是硬编码方式传递组件数据和配置的所有方式。
Output：您可以允许内容注入。这样，您就不必在进行细微更改时重写组件。将其与<ng-content>结合使用，只能自定义显示的某些部分。更多详细信息，here for example。
使用ng-content select，ngIf*，ngSwitch*，ng-container等。它允许根据组件配置变量显示不同的HTML代码。这样，您通常可以只有一个组件用于不同的最终用途。（例如：一个ng-template可以是复选框，文本字段等）。

使用所有这些工具，您可以有趣地思考重用代码的最佳方法。您应该以不复制代码为目标（旨在DRY）。

Answer 3

您可以拥有一个通用的可重用组件，例如TableComponent。

您可以在任何需要的地方继承该组件，并传递所需的参数和事件处理程序以根据需要对其进行自定义。

<table-comp [data]="arguments" (eventHandler)="FunctionName()">
</table-comp>

角组件继承

3 个答案: