模板定义的Angular 2 Access组件

Question

我以Ionic为例，但我认为这是一个通用的Angular 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进行了假设，但不确定语法

Answer 1

是的，这是一个有角度的问题。您可以使用@ViewChild装饰器来访问子组件。 喜欢：

@ViewChild(CountdownTimerComponent)
  private _timerComponent:CountdownTimerComponent;

有关详细信息，请参见angular2文档，不难理解。

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

PS。 如果您有多个类似按钮类型的组件，请使用

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

Answer 2

如果ion-slides是组件或指令，并且模板中只有一个实例，请使用@ViewChild：

@ViewChild(IonSlides) ionSlides:IonSlides;

假定组件类名称为IonSlides 。

this.ionSlides在构造函数中将不可用。 如ViewChild API页面中所述， 它将在生命周期挂钩ngAfterViewInit()可用：

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