Ionic2 @ViewChild 意外标记

Question

我已经按照这个 link 创建了一个滑块。 http://ionicframework.com/docs/v2/api/components/slides/Slides/

但是，当我尝试使用 ViewChild 访问本地模板变量时出现错误。

Unexpected token (10:44) while parsing file: /Users/shawn/Desktop/Ionic/abcdefg/app/pages/dashboard/dashboard.js

这些是我的源代码

dashboard.html

<ion-content>
 <div class="black-mask">
  <div class="calendar">
   <ion-slides #calendarSlider (didChange)="onSlideChanged()" [options]="slideOptions">
    <ion-slide>
     <div class="calendar-cell" *ngFor="#cal of previousCalendar; #i = index" [ngClass]="{selected: cal.selected}" (click)="toggle('previous', i)">
      <span class="calendar-day">{{ cal.dayOfWeek }}</span>
      <span class="calendar-day-number">{{ cal.day }}</span>
     </div>
    </ion-slide>
    <ion-slide>
     <div class="calendar-cell" *ngFor="#cal of currentCalendar; #i = index" [ngClass]="{selected: cal.selected}" (click)="toggle('current', i)">
      <span class="calendar-day">{{ cal.dayOfWeek }}</span>
      <span class="calendar-day-number">{{ cal.day }}</span>
     </div>
    </ion-slide>
    <ion-slide>
     <div class="calendar-cell" *ngFor="#cal of nextCalendar; #i = index" [ngClass]="{selected: cal.selected}" (click)="toggle('next', i)">
      <span class="calendar-day">{{ cal.dayOfWeek }}</span>
      <span class="calendar-day-number">{{ cal.day }}</span>
     </div>
    </ion-slide>
   </ion-slides>
  </div>
 </div>
</ion-content>

dashboard.js

import {Page, NavController, Slides} from 'ionic-angular';
import {ViewChild} from 'angular2/core';
import {LoginPage} from '../login/login';
import moment from 'moment';

@Page({
 templateUrl: 'build/pages/dashboard/dashboard.html',
 queries: {
  calendarSlider: new ViewChild('calendarSlider')
 }
})
export class DashboardPage {
 @ViewChild('calendarSlider') calendarSlider: Slides;

 static get parameters() {
  return [[NavController]];
 }

 constructor(nav) {
  this.nav = nav;
  console.log(this.calendarSlider);

  // Calendar Slider Options.
  // 0: Previous
  // 1: Current
  // 2: Next
  this.slideOptions = {
   initialSlide: 1,
   loop: true
  };
        (.......)
}

Answer 1

看来您使用的是 ES6 而不是 TypeScript。使用 ES6，您需要利用 @Page:

的 queries 属性

@Page({
  templateUrl: 'build/pages/dashboard/dashboard.html',
  queries: {
    calendarSlider: new ViewChild('calendarSlider')
  }
})
export class DashboardPage {
  (...)
}

编辑

calendarSlider 在调用 ngAfterViewInit 回调之前设置。所以你可以访问这个方法中的值（以及之后）。

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

Ionic2 @ViewChild 意外标记

Ionic2 @ViewChild unexpected token

ionic2

angular