Ionic 2 - 服务意外令牌错误
Ionic 2 - Services unexpected token error
我试图在 Ionic 2 应用程序的代码中使用 Injectable,但出现此错误。
模块构建失败:SyntaxError:/home.js:意外标记 (10:25)
export class HomePage {
constructor(myservice: WpService) {
^
this.service = myservice;
this.data = null;
}
这是我的代码:(home.js 文件)。
import {Page} from 'ionic-framework/ionic';
import {WpService} from './wpservice';
@Page({
templateUrl: 'build/pages/home/home.html',
providers: [WpService]
})
export class HomePage {
constructor(myservice: WpService) {
this.service = myservice;
this.data = null;
}
retrieve() {
this.service.loadData();
setTimeout(() => {
this.data = this.service.getData();
console.log(this.data);
}, 5000);
}
}
这是 wpservice 文件:
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx'
@Injectable
export class WpService {
constructor(http: Http) {
this.http = http;
this.data = null;
}
loadData() {
this.http.get('<some rest api>').subscribe(data => {
this.data = data.json()
});
}
getData() {
return this.data;
}
}
奇怪的是,这个错误是从 2 月 26 日晚上开始发生的。在此之前它工作正常。
我遇到了同样的问题,这似乎是 Ionic Version: 2.0.0-beta.1
的问题,显然它正在创建扩展名为 .js
的打字稿文件
阅读有关此问题的更多信息here
谢谢大家,我解决了这个问题。我将在下面 post 我是如何做到的,以便其他面临相同问题的人受益。
我写了一个 get parameters() 方法,如下所示。 (在 github 上查看了漂移合作团队的离子会议应用程序之后)。
import {Page} from 'ionic-framework/ionic';
import {Inject} from 'angular2/core;
import {WpService} from './wpservice';
@Page({
templateUrl: 'build/pages/home/home.html',
providers: [WpService]
})
export class HomePage {
static get parameters(){
return [WpService];
}
constructor(wpservice) {
this.service = wpservice;
this.data = null;
}
retrieve() {
this.service.loadData();
setTimeout(() => {
this.data = this.service.getData();
console.log(this.data);
}, 5000);
}
}
并且我将服务文件更改如下:
import {Injectable, Inject} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx'
@Injectable()
export class WpService {
static get parameters(){
return [Http];
}
constructor(http) {
this.http = http;
this.data = null;
}
loadData() {
this.http.get('<some rest api>').subscribe(data => {
this.data = data.json()
});
}
getData() {
return this.data;
}
}
如果您决定注入多个服务,那么您需要在获取参数方法中提供 return 语句,如下所示:
return [[service1],[service2]];
希望这对面临同样问题的其他人有所帮助。谢谢
我试图在 Ionic 2 应用程序的代码中使用 Injectable,但出现此错误。
模块构建失败:SyntaxError:/home.js:意外标记 (10:25)
export class HomePage {
constructor(myservice: WpService) {
^
this.service = myservice;
this.data = null;
}
这是我的代码:(home.js 文件)。
import {Page} from 'ionic-framework/ionic';
import {WpService} from './wpservice';
@Page({
templateUrl: 'build/pages/home/home.html',
providers: [WpService]
})
export class HomePage {
constructor(myservice: WpService) {
this.service = myservice;
this.data = null;
}
retrieve() {
this.service.loadData();
setTimeout(() => {
this.data = this.service.getData();
console.log(this.data);
}, 5000);
}
}
这是 wpservice 文件:
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx'
@Injectable
export class WpService {
constructor(http: Http) {
this.http = http;
this.data = null;
}
loadData() {
this.http.get('<some rest api>').subscribe(data => {
this.data = data.json()
});
}
getData() {
return this.data;
}
}
奇怪的是,这个错误是从 2 月 26 日晚上开始发生的。在此之前它工作正常。
我遇到了同样的问题,这似乎是 Ionic Version: 2.0.0-beta.1
的问题,显然它正在创建扩展名为 .js
阅读有关此问题的更多信息here
谢谢大家,我解决了这个问题。我将在下面 post 我是如何做到的,以便其他面临相同问题的人受益。
我写了一个 get parameters() 方法,如下所示。 (在 github 上查看了漂移合作团队的离子会议应用程序之后)。
import {Page} from 'ionic-framework/ionic';
import {Inject} from 'angular2/core;
import {WpService} from './wpservice';
@Page({
templateUrl: 'build/pages/home/home.html',
providers: [WpService]
})
export class HomePage {
static get parameters(){
return [WpService];
}
constructor(wpservice) {
this.service = wpservice;
this.data = null;
}
retrieve() {
this.service.loadData();
setTimeout(() => {
this.data = this.service.getData();
console.log(this.data);
}, 5000);
}
}
并且我将服务文件更改如下:
import {Injectable, Inject} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx'
@Injectable()
export class WpService {
static get parameters(){
return [Http];
}
constructor(http) {
this.http = http;
this.data = null;
}
loadData() {
this.http.get('<some rest api>').subscribe(data => {
this.data = data.json()
});
}
getData() {
return this.data;
}
}
如果您决定注入多个服务,那么您需要在获取参数方法中提供 return 语句,如下所示:
return [[service1],[service2]];
希望这对面临同样问题的其他人有所帮助。谢谢