Angular 2+ 組件嵌入與父子組件

Question

剛剛在Angular了解了transclusion，不知道在什么場景下用會比較好，也不知道它的用途是什么。

如果有什么區別？ 或者使用其中一個可能是一個好習慣？ 或者你為什么要使用嵌入？

假設我有這個組件，為什么我要將數據嵌入其中而不是將其寫入其中：場景 1：

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div class="my-component">
      'My component works!'
    </div>
  `
})
export class MyComponent {}

場景 2（轉錄）：

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div class="my-component">
      <ng-content></ng-content>
    </div>
  `
})
export class MyComponent {}

在應用程序組件中

<div class="app">
  <my-component>
    'My component works!'
  </my-component>
</div>

這與子父組件類似

<div class="my-component">
  <child-component></child-component>
</div>

對比

父組件：

<div class="my-component">
  <ng-content></ng-content>
</div>

應用組件：

<div class="app">
  <my-component>
    <child-component></child-component>
  </my-component>
</div>

Answer 1

這是一個很好的問題，您花在 Angular 上的時間越多，這個問題就越明顯。 記住組件的存在是為了划分行為，值得思考你划分的行為是什么。

假設您想在您的應用程序中輸入名稱，並且您總是希望名稱以相同的方式出現並與您的用戶交互。 在這種情況下，創建一個名稱組件以在任何地方以相同的方式輸入名稱是有意義的，並且需要名稱的表單永遠不需要關心名稱是如何呈現或收集的。 在這種情況下，孩子完全封裝自己的行為（以及所有孩子的行為）的父子關系是有意義的。

相反，讓我們假設您要創建一個內容可變的卡片。 您知道您希望邊框始終相同，標題具有相同的字體，填充相同。 但是中間的東西會發生變化，這與卡片的樣式無關。 這是一個融入的絕佳機會。 您創建了一個組件，它封裝了一組特定的樣式和行為，同時對傳遞給它的內容不可知。 如果你想在卡片中輸入一個輸入，父級可以這樣做並將該輸入直接綁定到它自己的表單中，而不是為這種情況創建一個新的子級。

總而言之 - 嵌入使您有機會以靈活的方式重用組件，以低工作量的方式保持某些行為和 styles 一致。 傳統的無嵌入父子關系允許您完全封裝特定（和確定性）行為，以便父級可以在完全不了解其任何內容的情況下使用它

Answer 2

包含允許您的組件不關心其內容，而是允許您的組件專注於其用途。 例如，一個手風琴組件不需要知道它的主體將包含什么——它可以只是簡單的文本、表格、圖形、列表或這些的組合。 因此，手風琴組件將使用嵌入來允許其消費者提供該內容。

嵌入還允許可重用性。 想象一下創建一個包含按鈕的 UI 庫，並且按鈕的設計允許消費者以各種方式放置更復雜的內容，例如圖像和 label。 或者一個復選框，它接受文本輸入為 label，但也允許消費者提供 label 作為圖像。

但是，使用嵌入的組件仍然可以通過使用 @ContentChild 或 @ContentChildren 來識別其內容或與之交互。