将 ViewChild 用于动态元素 - Angular 2 & ionic 2

Question

我想使用动态添加的多个 IonicSlides。但是我不能使用@viewChild。请提出解决此问题的方法。

Template.html :

<div *ngFor="let name of title;let i = index;">
    <ion-slides  id="something" #slides>
        //some code
    </ion-slides>
</div

Component.ts :

  @ViewChild('slides') slides: QueryList<Slides>;

  ....

  ngAfterViewInit(){
        setTimeout(()=>{
              alert(this.slides.toArray()); //this line rise error 
        }, 3000);
  }

错误：

_this.slides.toArray is not a function

Answer 1

使用 @ViewChildren 代替 @ViewChild , Read More

@ViewChild :

You can use ViewChild to get the first element or the directive matching the selector from the view DOM.

@ViewChildren :

You can use ViewChildren to get the QueryList of elements or directives from the view DOM.

Answer 2

@ViewChild 用于单个元素或指令。要从视图 DOM 中获取元素或指令的 QueryList，请使用 @ViewChildren

HTML

<div *ngFor="let name of title;let i = index;" #slides>
    <ion-slides  id="something">
        //some code
    </ion-slides>
</div

Component.ts

@ViewChildren("slides") private slides: QueryList<ElementRef>;
  ....

ngAfterViewInit(): void {
    this.slides.changes.subscribe(() => console.log(this.slides));
}

将 ViewChild 用于动态元素 - Angular 2 & ionic 2

Use ViewChild for dynamic elements - Angular 2 & ionic 2

javascript

angular

ionic2

viewchild