如何将 ElementRef 添加到本地 dom 中？

Question

我想创建一个布局组件来排列项目组，例如：

<garden-bed>
  <div #veg (click)="pluck()">carrot</div>
  <div #veg (click)="pluck()">cabbage</div>
  <div #veg (click)="pluck()">turnip</div>
</garden-bed>

到目前为止的组件看起来像

@Component({
  selector: 'app-garden-bed',
  templateUrl: './garden-bed.component.html',
})
export class GardenBed  {

  @ContentChildren('veg') vegs: QueryList<ElementRef>;

  constructor() { }


  ngAfterViewInit() {
    console.log('this.vegs=' + JSON.stringify(this.vegs));
  }

}

但我不知道如何将它们种植在模板中（garden-bed.component.html）：

  <div *ngFor="let veg of vegs">
     <ng-content/ng-template  *something="veg"></ng-template>
     but this doesn't work.
     veg should appear here and all its binding should work!

  </div>

非常感谢任何帮助！

Answer 1

为避免更改检测出现问题，您应该只使用一次 toArray 将 templateRefs 从 QueryList 中取出：

  templates: TemplateRef[];

  ngAfterViewInit() {
    console.log('this.vegs=' + JSON.stringify(this.vegs));
    this.templates = this.vegs.toArray();
  }

然后使用ngTemplateOutlet标记模板

  <div *ngFor="let veg of templates">
     <ng-container *ngTemplateOutlet="veg"></ng-container>
     but this doesn't work.
     veg should appear here and all its binding should work!

  </div>

ngTemplateOutlet 还允许传递可以在模板中绑定的上下文数据

另见

• What is let-* in Angular 2 templates?

不要被<ng-template [ngTemplateOutlet]="myTemplate" 弄糊涂了，它只是我上面显示的替代语法

• Empty context data of ng-template while implementing recursive ngFor loop