如何避免Angular 5中多个组件的代码重复？

Question

在我的角度应用程序中有多个组件，其中2个组件使用几乎相同的代码，除了一个组件使用extraa按钮标签，其自身的逻辑剩余代码在两个组件中几乎相同。

有没有办法减少代码重复？

• 打开我的应用程序后，默认页面打开，其中包含top div - mid div和底部div。

顶部div中的

• - 点击这些链接的链接很少打开一个新页面（新的 组件）。

• 如果我点击tom div中的链接，这里将打开相应的组件页面 页面几乎与之前包含顶部div，mid div，底部div但有些相同 顶部div中的额外链接。

• 因此模板在两个组件中几乎相同。所以如何避免复制 两个组件中的代码相同？

• 有什么方法可以将component1模板放在components2中？ （我不能 使用选择器，因为我需要在component2中的顶部div中添加更多链接

Answer 1

有多种方法可以做到这一点。

可以将两个组件合二为一。然后传入一个输入，确定是否应显示额外的按钮标记。

<combined-component [showExtraButtons]="true"></combined-component>

然后隐藏额外的按钮。

<combined-component [showExtraButtons]="false"></combined-component>

Answer 2

我不知道确切的情况是什么，但您可能希望看一下：Generalizing Components

在某些情况下，使用合成模式减少代码重复可能会很好。您可以使用角度转换创建一些generic组件并传递额外内容。

Answer 3

根据我目前的情况，您应该使用@Input装饰器在组件之间传递数据以显示或隐藏您的组件或使用*ngIf

  

使用* ngIf从ts中设置toShow的值。

<div *ngIf="toShow"></div>

  

在ts文件中使用@Input

@Input() className: string = "display-block";

  

在您的组件中

<div [class]="className"></div>