將 Angular 組件傳遞給另一個組件

Question

我知道以前有人問過這個問題，但老實說我不明白這些答案。 我想做一些簡單的事情：

基本上我有這個：

<div class="carousel">
  <ul class="carousel__track">
     <li ngFor="let slideHtml of SlidesHTML?" class="carousel__slide">
       **THIS IS ACTUALLY WHERE I WANT TO PASS ANOTHER HTML COMPONENT**
       i.e: <app-slideHtml>
    </li>
   </ul>
</div>

我想基本上實現這一點，但我不知道我是否可以使用@Input() html或者我是否需要為此使用ng-content 。 我需要在.ts文件中放入什么？

編輯：我在 li 元素中使用ngFor指令，所以我實際上可以顯示所有幻燈片。 我不知道這是否可能，我只是想看看我是否真的能做到這一點。

Answer 1

是的你可以

<li *ngFor="let slide of slides" class="carousel__slide">
    <!-- Rename inputName by the actual input name you want-->
    <app-slideHtml [inputName]="slide.someData"></app-slideHtml>
</li>

其中inputName是app-slideHtml中@Input的名稱，而someData是幻燈片的屬性。

在app-slideHtml.component.ts

@Input() inputName: any; // Rename 'inputName' by the actual input name you want

您可以通過將slide傳遞給輸入來傳遞整個對象而不是某些屬性。