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 doc的详细信息，而不是很难。

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;

这假定组件类名称为IonSlides。

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

中所述

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

Angular 2访问组件由模板定义

2 个答案: