需要在 Angular 中使用具有唯一值的相同組件 2 次以上

Question

需要創建一個帶有一些磁貼的 Angular 儀表板； 我為磁貼創建了一個服務，但需要從儀表板組件傳遞給子組件。

 <app-tiles class="card overview-box-1 teal" [data]="tileContent"></app-tiles>

儀表板

 tileContent = {
    header: "Text header",
    content: "test content"
  };

應用子

@Input() data: string;

現在我有多個圖塊，如何將唯一數據傳遞給每個圖塊？

Answer 1

為什么不將 TilesComponent 設為 TileComponent。 您可以擁有一個包含您需要的所有數據的數組，並使用*ngFor來遍歷您的數據列表。

您的 AppTileComponent 將有一個名為 tileContent 的輸入，該輸入采用一組圖塊。

export class AppTileComponent {
  @Input() tilesData: TilesData[];
}

tileData 可以是您需要在圖塊中顯示的任何內容。

tileContent = [{
 header: "First Data",
 content: "first data content"
},
{
  header: "Second Data",
  content: "Second Data content"
}]

您甚至可以從服務中傳遞它並獲得您正在尋找的相同結果。

Answer 2

如果您想將數據從父母發送給孩子，您可以使用輸入，請點擊此處