Angular 2 Access-Komponente durch Vorlage definiert

Question

Ich verwende Ionic als ein Beispiel dafür, aber ich denke, es ist eine allgemeine Angular 2 Frage.

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> 

Wie verweisen ich programmatisch die ion-slides Objekt aus dem Konstruktor der Klasse Seite1?

Ich hatte über eine Art von #reference angenommen, aber ich bin nicht sicher, ob die Syntax

Answer 1

Wenn ion-slides eine Komponente oder eine Richtlinie ist, und es gibt nur eine Instanz in der Vorlage verwenden @ViewChild:

@ViewChild(IonSlides) ionSlides:IonSlides; 

Dies setzt voraus, dass der Name der Komponentenklasse IonSlides lautet.

this.ionSlides wird nicht im Konstruktor verfügbar sein. Es wird im Lebenszyklus-Hook ngAfterViewInit() verfügbar sein, wie in dem ViewChild API page:

dokumentiert wird

Answer 2

Ja, es ist ein Winkel question.You @ViewChild Dekorateur können untergeordnete Komponente zuzugreifen. wie:

@ViewChild(CountdownTimerComponent) 
    private _timerComponent:CountdownTimerComponent; 

Siehe das angular2 doc für das Detail, nicht zu schwer.

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

PS. wenn Sie mehr als auf Komponenten in gleicher Art wie Knopf haben, verwenden Sie

@ViewChildren(Button) buttons: QueryList<Button>;