Как передать данные в код HTML, который находится внутри компонента?

Question

В компоненте у меня есть это:

    <sidemenu #side>
      <h1>{{item}}</h1>
    </sidemenu>

в sidemenu Компонент:

    aNames=["pedro","juan"]
    .
    .
    .
    <div *ngFor="let item of aNames">
      <ng-content [name]="item"></ng-content>
      <!-- I need:
         <h1>pedro</h1>    
         <h1>juan</h1>    
    -->
    <div>

Я надеюсь разобраться в этом примере. На самом деле у меня есть более сложная структура, но чтобы понять себя, я привел этот небольшой пример.

Я помещаю код html внутри компонента, и, где я включаю этот компонент, я хотел бы, чтобы некоторые данные передавались к этому. В этом примере я включаю <ng-content> </ng-content> (<h1>) внутри * ngFor, поэтому я хотел бы передать данные в этот тег h1

Answer 1

Вы должны передать данные компоненту, связав свойство следующим образом.

<sidemenu [data] = "item">

</sidemenu>

Затем получить доступ к этому свойству с помощью декоратора @Input() в компоненте sidemenu следующим образом.

@Input() data : string;

затем использовать можно вывести эти данные в шаблон этого компонента с использованием интерполяции

<h1> {{ data }} </h1>