离子 2 - 服务意外令牌错误

Question

我正在尝试在 Ionic 2 应用程序的代码中使用可注射对象，但出现此错误。

模块生成失败：语法错误：/home.js：意外令牌 （10：25）

export class HomePage {
constructor(myservice: WpService) {
                     ^
         this.service = myservice;
        this.data = null;
     }

这是我的代码：（主页.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);
    }
}

这是WP服务文件：

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日晚上开始发生。在此之前，它工作正常。

Answer 1

谢谢大家，我解决了这个问题。我将在下面发布我是如何做到的，以便其他面临同样情况的人都能从中受益。

我写了一个 get parameters（） 方法，如下所示。（在看了github上漂移的co团队的离子会议应用程序之后）。

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

如果您决定注入多个服务，则需要在 get parameters 方法中给出 return 语句，如下所示：

return [[service1],[service2]];

希望这有助于面临相同问题的其他人。谢谢。

Answer 2

我遇到了同样的问题，这似乎是Ionic Version: 2.0.0-beta.1的问题，显然它创建了扩展名为.js的打字稿文件

在此处阅读有关此问题的更多信息