Açısal 2 beta.8 @Query nasıl kullanılır?

Question

Şablonumdaki bir öğe hakkında bilgi almak için @Query kullanmayı deniyorum. Ama işe yaramayacak gibi görünmüyorum.

ben bu şekilde yapıyor çalıştı: Documented here Mine şöyle görünür,

import {Component, Query, QueryList, ElementRef} from 'angular2/core'; 

@Component({ 
    selector : 'my-app', 
    template : ` 
     <banner #banner> 
      <h4>Some New App</h4> 
     </banner> 
     <div class="container"></div> 
    ` 
}) 

export class App 
{ 
    private banner:any; 

    constructor(@Query('banner') banner:QueryList<ElementRef>) 
    { 
     this.banner = banner; 
    } 

    ngOnInit() 
    { 
     console.log(this.banner) 
    } 
} 

Konsolu günlük bunu gösterir:

Şimdi burada yanlış olabilir. Ama bir sonuca sahip olmak için _results: Array[0] beklerim. <h4> öğesi hakkında bilgi içermesini beklerim.

Böylece akılda tutularak. Belgeleri takip ederek birkaç farklı yol denedim. Bazı insanlar kabob davası, bazı deve, vb ile gördüm. Bu yüzden belki de belgelerin güncellenmediğini düşündüm.

daha arama yaptıktan sonra ben @Query bu sözdizimine değiştirildi Has bu https://github.com/angular/angular/issues/3922

geldi?

@ContentChild() ve @ViewChildren()

sorum bugün itibariyle bunu yapmak doğru yolu budur Her iki şekilde de? Yoksa burada bir şey eksik mi?

Answer 1

@Query (ng-content aracılığıyla yansıtılan unsurların) @ContentChild/@ContentChildren eşdeğer nedenle bunun görünümünüze içindeki elemanları sorgulamak için çalışmaz olduğunu. İstediğiniz, @ViewQuery(). Bu, API will be removed'dan beri @Query veya @ViewQuery'u kullanmamanız gerektiğini söyledi.

Bu kod örneği geçerli API ile çalışan bir plnkr Burada

import {Component, ViewChildren, QueryList, ElementRef} from 'angular2/core'; 

@Component({ 
    selector : 'my-app', 
    template : ` 
     <banner #banner> 
      <h4>Some New App</h4> 
     </banner> 
     <div class="container"></div> 
    ` 
}) 
export class App { 

    @ViewChildren('banner') banner: QueryList<ElementRef>; 

    ngAfterViewInit() { 
     console.log(this.banner) 
    } 
} 

düzeltilmiş olması.