Question

我已按照此链接创建了Slider。 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

＆＃13;

<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>

＆＃13;

dashboard.js

＆＃13;

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
		};
        (.......)
}

＆＃13;

Answer 1

您似乎使用ES6而不是TypeScript。使用ES6，您需要利用queries的{{1}}属性：

@Page

修改

@Page({ templateUrl: 'build/pages/dashboard/dashboard.html', queries: { calendarSlider: new ViewChild('calendarSlider') } }) export class DashboardPage { (...) }在调用calendarSlider回调之前设置。因此，您可以访问此方法中的值（以及之后）。

ngAfterViewInit

Ionic2 @ViewChild意外令牌

1 个答案: