帶有* ngFor的Angular 2模板引用變量

Question

我有兩個組件：列表和詳細信息

在列表組件中，我想渲染多個細節組件 。

list.component.ts

@Component({
    selector: 'detail',
    templateUrl: './detail.component.html'
})
export class DetailComponent {
    @ViewChild('details') details;

    public items = {
        // ...
    }
}

list.component.html

<detail *ngFor="let item of items" #details></detail>

注意#details tempalte引用變量。 我想訪問所有細節組件。 可以使#details變量成為一個數組嗎？

Answer 1

@ViewChildren('details') details:QueryList<DetailComponent>;

ngAfterViewInit() {
  console.log(this.details.toArray());
  this.details.changes.subscribe(changes => {
    console.log(this.details.toArray());
  });
}

另請參見angular 2 / typescript：獲取模板中的元素