Angular 用数据嵌套组件

Question

我正在尝试嵌套多个组件，如下所示。我的目标是将用户数据注入到 user-item 组件中，而无需将 item 组件写入 list 组件中。

应用组件

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

用户列表组件

<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 {}

用户-list.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>;
}

用户-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 Example

Angular 用数据嵌套组件

Angular nesting components with data

vue.js

angular