Ionic2 @ViewChild意外令牌

Question

我跟着这个链接来创建一个滑块。 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> 
 
\t <div class="black-mask"> 
 
\t \t <div class="calendar"> 
 
\t \t \t <ion-slides #calendarSlider (didChange)="onSlideChanged()" [options]="slideOptions"> 
 
\t \t \t \t <ion-slide> 
 
\t \t \t \t \t <div class="calendar-cell" *ngFor="#cal of previousCalendar; #i = index" [ngClass]="{selected: cal.selected}" (click)="toggle('previous', i)"> 
 
\t \t \t \t \t \t <span class="calendar-day">{{ cal.dayOfWeek }}</span> 
 
\t \t \t \t \t \t <span class="calendar-day-number">{{ cal.day }}</span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </ion-slide> 
 
\t \t \t \t <ion-slide> 
 
\t \t \t \t \t <div class="calendar-cell" *ngFor="#cal of currentCalendar; #i = index" [ngClass]="{selected: cal.selected}" (click)="toggle('current', i)"> 
 
\t \t \t \t \t \t <span class="calendar-day">{{ cal.dayOfWeek }}</span> 
 
\t \t \t \t \t \t <span class="calendar-day-number">{{ cal.day }}</span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </ion-slide> 
 
\t \t \t \t <ion-slide> 
 
\t \t \t \t \t <div class="calendar-cell" *ngFor="#cal of nextCalendar; #i = index" [ngClass]="{selected: cal.selected}" (click)="toggle('next', i)"> 
 
\t \t \t \t \t \t <span class="calendar-day">{{ cal.dayOfWeek }}</span> 
 
\t \t \t \t \t \t <span class="calendar-day-number">{{ cal.day }}</span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </ion-slide> 
 
\t \t \t </ion-slides> 
 
\t \t </div> 
 
\t </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({ 
 
\t templateUrl: 'build/pages/dashboard/dashboard.html', 
 
\t queries: { 
 
\t \t calendarSlider: new ViewChild('calendarSlider') 
 
\t } 
 
}) 
 
export class DashboardPage { 
 
\t @ViewChild('calendarSlider') calendarSlider: Slides; 
 

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

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

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

Answer 1

看来你使用ES6代替打字稿。随着ES6你需要利用@Page的queries属性：

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

编辑

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

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