Ionic 2 - 服务意外令牌错误

时间:2016-02-27 09:05:01

标签: angular ionic2 injectable

我正在尝试在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;
    }
    }

奇怪的是,这个错误只发生在26日晚上。在此之前它运作良好。

2 个答案:

答案 0 :(得分:3)

谢谢大家,我解决了这个问题。我将在下面发布我是如何做到这一点的,这样任何面对同样的人都会受益。

我写了一个get parameters()方法,如下所示。 (看了github上drifty 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]];

希望这可以帮助其他人面对同样的问题。感谢。

答案 1 :(得分:0)

我面临同样的问题,它似乎是Ionic Version: 2.0.0-beta.1的一个问题,显然它创建的扩展名为.js

的打字稿文件

详细了解此问题here