Угловые вложения компонентов с данными

Question

Я пытаюсь вложить несколько компонентов, как показано ниже.Моя цель - внедрить пользовательские данные в компонент user-item без записи компонента item внутри компонента list.

App-Component

<app-user-list>
    <app-user-item></app-user-item>
</app-user-list>

User-List-Component

<div class="card-columns">
    <div class="card" *ngFor="let user of users">           
       ???
    </div>
</div>

User-Item_component

    <div class="card-body">
        <h2 class="card-title">{{ user.name }}</h5>
    </div>

Answer 1

Это будет легко, если вы предоставите TemplateRef до UserListComponent.

app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <app-user-list>
        <ng-template let-item>
            <app-user-item [user]="item"></app-user-item>
        </ng-template>
    </app-user-list>
  `
})
export class AppComponent {}

список пользователей.component.ts

@Component({
  selector: 'app-user-list',
  template: `
    <div class="card" *ngFor="let user of users; template: template"></div>
  `
})
export class UserListComponent {
  users = [
    {
      name: 'User 1'
    },
    {
      name: 'User 2'
    }
  ];

  @ContentChild(TemplateRef) template: TemplateRef<any>;
}

user-item.component.ts

@Component({
  selector: 'app-user-item',
  template: `
    <div class="card-body">
        <h2 class="card-title">{{ user.name }}</h2>
    </div>
  `
})
export class UserItemComponent {
  @Input() user: any;
}

Ng-run Пример