将 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 传递给输入来传递整个对象而不是某些属性。

将 Angular 组件传递给另一个组件

Passing Angular component to another one

html

javascript

typescript

angular