Angular 组件创建最佳实践

Question

当我想要一个组件的新行为时，我常常犹豫不决。

举个简单的例子，我有<app-title>个组件：

<div>
    <h1>{{title}}</h1>
</div>

一段时间后，在另一个页面中，我需要在标题旁边放置一个按钮。问题是，我应该创建一个新的 title 组件还是应该对现有组件进行参数化？

我可以将 <app-title> 编辑为如下所示：

export class AppTitleComponent implements OnInit {

  @Input() showButton: boolean;

  title = 'App title';
  
  constructor() {}
  
  ngOnInit() {}
}

<div>
  <h1>{{title}}</h1>
  <button *ngIf="showButton">{{buttonTitle}}</button>
</div>

这是一个简单的例子，可能很明显但是使用 Angular 我总是有这个问题，考虑复杂的组件：@Input() 使用这种方法会变得很多，但是创建一个新组件会增加文件和复杂性。

从这个例子中你可以说创建两个组件，一个用于标题，另一个用于按钮，但这只是因为这是一个非常简单的案例。考虑将组件从“紧凑”模式更改为“扩展”模式，反之亦然。一方面你可能需要有大的组件，另一方面让它的尺寸更小，显示的信息更少

关于这方面有一些指导方针吗？

谢谢

Answer 1

我认为考虑组件上下文中的行为很重要。按钮是标题组件行为的核心吗？不仅要显示按钮，还要在标题组件的上下文中处理它的事件是否有意义？如果答案是否定的，那么我会在某个粒度级别拆分组件。

以下是您可以考虑的其他一些事项：

预料到你的title组件可能需要用title包裹一些内容，可以使用transclusion：

<div>
    <h1>{{title}}</h1>
    <ng-content></ng-content>
</div>

然后，在 parent 中，您将执行如下操作：

<div>
  <app-title-component title='title'>
    <button>Some Button Text</button>
  </app-title-component>
</div>

您可以编写一个包装器组件，将标题和按钮包装在一起...即：

<div>
  <app-title-component></app-title-component>
  <button>Some Button Text</button>
</div>

您可以按照建议对配置进行参数化。我建议考虑您正在参数化的行为是否是组件核心行为的一部分。例如，如果您想参数化图例是否显示在图表上，这是有道理的，因为图例是图表的核心特征。但我可能不会参数化图表是否应该跟在原始数据 sheet 之后。相反，我会为此创建一个新组件并按顺序呈现它们，因为数据 sheet 不是图表核心行为的一部分，即使有时我想将它们放在一起。

归根结底，您必须根据您的应用、您应用的未来可用性和开发人员的易用性来考虑决定（例如，此按钮与标题).

希望对您有所帮助。

Angular 组件创建最佳实践

Angular component creation best practices

javascript

components

angular