2016-06-15 4 views
1

Я пытаюсь получить сервис, работающий в моем компоненте, но на всю жизнь после многочисленных итераций и исчерпания ресурсов google, которые я еще не смог получить работать, даже если он выравнивается в основном с каждым найденным мной примером. Моя последняя попытка состояла в том, чтобы использовать генератор ионов для генерации провайдера, и это все еще не работает.Использование службы/поставщика в компоненте на Angular 2 ES6

Услуги:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class EventsService { 
    static get parameters() { 
    return [ 
     [Http] 
    ] 
    } 

    constructor(http) { 
    this.http = http; 
    this.data = null; 
    } 

    load() { 
    if (this.data) { 
     return Promise.resolve(this.data); 
    } 

    return new Promise(resolve => { 
     this.http.get('URL_OMMITED') 
     .map(res => res.json()) 
     .subscribe(data => { 
      this.data = data; 
      resolve(this.data); 
     }); 
    }); 
    } 
} 

Компонент:

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { ScientificFactsPage } from '../scientific-facts-page/scientific-facts-page'; 
import { Header } from '../../components/header/header'; 
import { List } from '../../components/list/list'; 
import { EventsService } from '../../providers/events-service/events-service'; 

@Component({ 
    templateUrl: 'build/pages/home-page/home-page.html', 
    directives: [Header, List], 
    providers: [EventsService], 
}) 
export class HomePage { 
    static get parameters() { 
    return [ 
     [NavController] 
    ]; 
    } 

    constructor(_navController) { 
    this._navController = _navController; 
    this._events = EventsService; 

    this.provinces = this._events.load(); 
    } 

    logProvince(province) { 
    alert(`You selected ${province.name}`); 
    } 

} 

Я не могу понять, что мне не хватает, консоль бросает массивную ошибку трассировки стека, что примерно так же полезно, как " Что-то случилось », все это действительно дает мне возможность использовать мою функцию, по-видимому, не функцию.

Отрывок Ошибка:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 
ORIGINAL EXCEPTION: TypeError: this._events.load is not a function 
ORIGINAL STACKTRACE: 
TypeError: this._events.load is not a function 
    at new HomePage (http://localhost:8100/build/js/app.bundle.js:233:35) 
    at DebugAppView._View_HomePage_Host0.createInternal (HomePage_Host.template.js:25:24) 
    at DebugAppView.AppView.create (http://localhost:8100/build/js/app.bundle.js:26040:21) 
    at DebugAppView.create (http://localhost:8100/build/js/app.bundle.js:26233:44) 
    at ComponentFactory.create (http://localhost:8100/build/js/app.bundle.js:25354:36) 
    at ViewContainerRef_.createComponent (http://localhost:8100/build/js/app.bundle.js:26430:45) 
    at http://localhost:8100/build/js/app.bundle.js:25571:29 
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:323:29) 
    at Object.onInvoke (http://localhost:8100/build/js/app.bundle.js:30868:41) 
    at ZoneDelegate.invoke (http://localhost:8100/build/js/zone.js:322:35) 
ERROR CONTEXT: 
[object Object] 

ответ

1

Потребовалось некоторое делать, но с немного помощи от https://github.com/driftyco/ionic-conference-app, мне удалось решить, где проблемы были.

стартеры мне нужно грузиться поставщика в app.js

ionicBootstrap(MyApp, [ProvinceData]); 

@ günter-zöchbauer был на правильном пути, только некоторые незначительные проблемы, каждый является его В параметре собственный массив внутри возвращаемого массива. Спасибо за помощь.

static get parameters() { 
    return [ 
     [NavController], 
     [ProvinceData] 
    ]; 
    } 

После этого он просто надевал требуемые обещания.

+0

Рад видеть, что вы это поняли. Это нелегко найти. Я искал какое-то время, чтобы найти пример, и некоторые из них, которые я нашел, использовали в моем ответе (я не использую сам Ionic). –

+1

Большая часть из них по-прежнему угловая 2, Ionic просто предоставляет несколько директив. Угловая 1 была намного проще. Спасибо за азист. – RemeJuan

1

Вы должны вводить EventService как вы делаете с NavController. Вы просто указали переменную типа. Вам понадобится хотя бы использовать = new EventService() вместо = EventService, но инъекция лучше и, вероятно, то, что вы хотите, потому что вы уже добавили его в providers: [...].

@Component({ 
    templateUrl: 'build/pages/home-page/home-page.html', 
    directives: [Header, List], 
    providers: [EventsService], 
}) 
export class HomePage { 
    static get parameters() { 
    return [ 
     // updated according to the find of @RemeJuan 
     [NavController], [EventsService] 
    ]; 
    } 

    constructor(_navController, _events) { 
    this._navController = _navController; 
    this._events = _events; 

    this.provinces = this._events.load(); 
    } 

    logProvince(province) { 
    alert(`You selected ${province.name}`); 
    } 

} 
+0

спасибо, но в конструкторе _events возвращается как undefined then – RemeJuan

+0

Я только что видел, что у меня была опечатка ('EventService' вместо' EventsService' - missing 's'). Это исправить вашу проблему? –

+0

Нет, я тоже поднял этот. Похоже, что это может случиться из службы, хотя, похоже, что http на этой стороне не проходит через – RemeJuan

Смежные вопросы