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

我認為考慮組件上下文中的行為很重要。 按鈕是標題組件行為的核心嗎？ 不僅顯示按鈕，而且在標題組件的上下文中處理其事件是否有意義？ 如果答案是否定的，那么在某個粒度級別上，我會拆分組件。

以下是您可以考慮的其他一些事項：

1. 預計您的標題組件可能需要一些用標題包裝的內容，您可以使用嵌入：

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

然后，在父母中，你會做這樣的事情：

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

2. 您可以編寫一個包裝器組件，將標題和按鈕打包在一起......即：

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

3. 您可以按照建議對配置進行參數化。 我建議考慮您正在參數化的行為是否是組件核心行為的一部分。 例如，如果您想參數化圖例是否顯示在圖表上，這是有道理的，因為圖例是圖表的核心特征。 但我可能不會參數化圖表是否應跟隨原始數據表。 相反，我會為此創建一個新組件並按順序呈現它們，因為數據表不是圖表核心行為的一部分，即使有時我想將它們放在一起。

歸根結底，您必須考慮您的應用程序、應用程序未來的可用性和開發人員的易用性（例如，此按鈕與標題一起打包對未來的開發人員是否有意義）。

我希望你覺得這有幫助。