Angular 2 访问模板定义的组件

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 class 的构造函数中引用 ion-slides 对象？

我是通过某种#reference 假设的，但我不确定语法

Answer 1

是的，这是一个 angular question.You 可以使用 @ViewChild 装饰器来访问子组件。喜欢：

@ViewChild(CountdownTimerComponent)
  private _timerComponent:CountdownTimerComponent;

有关详细信息，请参阅 angular2 文档，不难。

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

PS。如果您有多个相同类型的组件，例如 Button，请使用

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

Answer 2

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

@ViewChild(IonSlides) ionSlides:IonSlides;

这假定组件 class 名称为 IonSlides。

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

中所述

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

Angular 2 访问模板定义的组件

Angular 2 Access Component Defined by Template

angularjs

angular2-directives

angular