2016-04-06 12 views
0

私はこれの例としてIonicを使用していますが、これは一般的なAngular 2の問題です。角2のアクセスコンポーネントテンプレートで定義されています

page1.ts

import {Page} from 'ionic-angular'; 

@Page({ 
    templateUrl: 'build/pages/page1/page1.html' 
}) 
export class Page1 { 
    constructor() { 

    } 
} 

page1.html

<ion-navbar *navbar> 
    <ion-title>Tab 1</ion-title> 
</ion-navbar> 

<ion-content padding class="page1"> 
    <ion-slides pager> 
    <ion-slide> 
     <h3>Thank you for choosing the Awesome App!</h3> 
     <p> 
     The number one app for everything awesome. 
     </p> 
    </ion-slide> 
    <ion-slide> 
     <h3>Using Awesome</h3> 
     <div id="list"> 
      <h5>Just three steps:</h5> 
      <ol> 
      <li>Be awesome</li> 
      <li>Stay awesome</li> 
      <li>There is no step 3</li> 
      </ol> 
     </div> 
    </ion-slide> 
    <ion-slide> 
     <h3>Any questions?</h3> 
    </ion-slide> 
    </ion-slides> 
</ion-content> 

は、どのように私はプログラム的Page1のクラスのコンストラクタからion-slidesオブジェクトを参照しますか?

私は#referenceのいくつかの並べ替えを経由して想定していたが、私ははい、それは角度question.Youは、子コンポーネントにアクセスするために@ViewChildデコレータを使用することができます構文

答えて

2

を使用し、@ViewChild使用:

@ViewChild(IonSlides) ionSlides:IonSlides; 

これは、コンポーネントクラス名がIonSlidesであることを前提としています。

this.ionSlidesは、コンストラクタでは使用できません。 ViewChild API pageに記載されているライフサイクルフックngAfterViewInit()で利用できるようになります。

ngAfterViewInit() { 
    console.log(this.ionSlides); 
} 
2

のかわかりません。 like:

@ViewChild(CountdownTimerComponent) 
    private _timerComponent:CountdownTimerComponent; 

詳細については、angular2の文書を参照してください。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child

PS。あなたはボタンのように、同じタイプのコンポーネントよりも多くを持っている場合ion-slidesは、コンポーネントまたはディレクティブがあり、かつ唯一のインスタンスがテンプレートであった場合、

@ViewChildren(Button) buttons: QueryList<Button>; 
関連する問題