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

user-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>;
}

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 Example

角嵌套组件与数据

1 个答案: