显示我使用 @ContentChildren 或 @ViewChild 获取的组件的内容

Question

所以我试图在我的组件中的特定位置显示子组件。

我有以下几点：

@Component({
  selector: 'app-item-list',
  template: `
<p *ngFor="let item of items">
  {{item.order}}
  <!-- display content of child component here -->
</p>`
})
export class ItemListComponent implements OnInit, AfterContentInit {

  //Get all child components of the type ItemComponent and store them.
  @ContentChildren(ItemComponent, {descendants: true}) 
  items?: QueryList<ItemComponent>;
  constructor() { }

  ngOnInit() {
  }
    
  ngAfterContentInit(): void {
      
  }

}

@Component({
  selector: 'app-item',
  template: `
<p>
  item works!
</p>
<ng-content></ng-content>
`
})
export class ItemComponent implements OnInit {

  @Input() order?: string;
  constructor() { }

  ngOnInit() {
  }

}

我试图使用它来显示它，<ng-content select="item">但这没有用。

具有以下内容：

<app-item-list>
  <app-item order="2">
    test2
  </app-item>
  <app-item order="1">
    test1
  </app-item>
</app-item-list>

预期的输出是

2
item works!
test2
1
item works!
test1

https://stackblitz.com/edit/angular-ivy-2aibgt

Answer 1

我可以向您推荐一个在 Angular 材料库中使用的解决方案。

• 将app-item组件的内容包装在<ng-template>标签中

item.component.html

<ng-template>  <----------------------------- wrapper
  <p>
    item works!
  </p>
  <ng-content></ng-content>
</ng-template>

• 然后我们可以获取对它的引用 TemplateRef

item.component.ts

@ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;

• 最后我们可以在app-item-list组件循环中使用它

项目列表.component.html

<p *ngFor="let item of items">
  {{item.order}}
  <ng-template [ngTemplateOutlet]="item.template"></ng-template>
</p>

分叉的堆栈闪电战