Используйте угловые 2 услуг в рамках функций компонентов

Question

Вот пример того, как я получаю Четвероугольную информацию в одном из моих компонентов:

import {Component} from 'angular2/core'; 
import {FoursquareService} from '../../services/foursquare' 

@Component({ 
    templateUrl : 'app/components/new-listing/new-listing.html', 
    providers : [FoursquareService] 
}) 

export class NewListingComponent { 

    venues : Array<Object> = []; 

    constructor(foursquareApi : FoursquareService) { 

    //Foursquare api 
    foursquareApi.foursquareGet('&ll=51.5255168,-0.0858669&query=xoyo') 
    .subscribe(data => { 
     this.venues = data.response.venues; 
     console.log(this.venues); 
    }); 

    } 

} 

Это журналы, связанные объекты на консоль при загрузке страницы, однако я хочу добиться одинаковой функциональности при нажатии кнопки или во время ввода пользователем, следовательно, иметь ее в отдельной функции, однако каждый раз, когда я удаляю foursquareApi : FoursquareService из конструктора, я получаю различные ошибки.

Answer 1

Я добавлю некоторое представление о своем ответе.

Вы можете оставить функцию FourSquareService в своем constuctor, потому что вы хотите, чтобы она создавалась при рендеринге вашего компонента.

Просто переместите свою логику на другую функцию, например.

import {Component} from 'angular2/core'; 
import {FoursquareService} from '../../services/foursquare' 

@Component({ 
    templateUrl : 'app/components/new-listing/new-listing.html', 
    providers : [FoursquareService] 
}) 

export class NewListingComponent { 

    venues : Array<Object> = []; 

    // this assigns _foursquareApi as a private property for the 
    // NewListingComponent and is available later in your userSubmission function. 
    constructor(private _foursquareApi : FoursquareService) {} 

    // function you want to be called on click or submission. 
    userSubmission(submittedData:string){ 
    //Foursquare api 
    this._foursquareApi.foursquareGet(submittedData) 
    .subscribe(data => { 
     this.venues = data.response.venues; 
     console.log(this.venues); 
    }); 
    } 

} 

Answer 2

Вы можете добавить слушатель (с (click) выражения) в шаблоне, который использует метод вашего компонента (loadData один пример):

@Component({ 
    template : ` 
    <span (click)="loadData()">Load data</span> 
    <ul> 
     <li *ngFor="#venue of venues">{{venue.something}}</li> 
    </ul> 
    `, 
    providers : [FoursquareService] 
}) 
export class NewListingComponent { 
    venues : Array<Object> = []; 

    constructor(foursquareApi : FoursquareService) { 
    this.foursquareApi = foursquareApi; 
    } 

    loadData() { 
    //Foursquare api 
    this.foursquareApi.foursquareGet('&ll=51.5255168,-0.0858669&query=xoyo') 
     .subscribe(data => { 
     this.venues = data.response.venues; 
     console.log(this.venues); 
    }); 
    } 
} 

Надеется, что это помогает вам, Тьерри

Answer 3

Вы должны сделать foursquareApi членом класса (private/public/protected). В противном случае он недоступен вне конструктора.

import {Component} from 'angular2/core'; 
import {FoursquareService} from '../../services/foursquare' 

@Component({ 
    templateUrl : 'app/components/new-listing/new-listing.html', 
    providers : [FoursquareService] 
}) 

export class NewListingComponent { 

    venues : Array<Object> = []; 

    //try to keep the constructor body as empty as possible 
    //as you can see i've added the word 'public' 
    constructor(public foursquareApi : FoursquareService) {} 

    public getFourSquare() : void { 
    //Foursquare api 
    this.foursquareApi.foursquareGet('&ll=51.5255168,-0.0858669&query=xoyo') 
    .subscribe(data => { 
     this.venues = data.response.venues; 
     console.log(this.venues); 
    }); 
    } 

} 

Answer 4

К настоящему моменту вы должны иметь ответ, но если кто-то ищет ответ: сделать услугу защищенной в конструкторе и делать все, что вызов со службой в конструкторе от нагрузки. Но если вы хотите использовать onClick или какое-либо действие, вы можете обратиться к сервису внутри функции onClick - constructor(private myService:MyService) {//Do call with on load for this. } toggleHobbies(){ this.showHobbies = !this.showHobbies; console.log(this.myService.getPosts()); console.log(1); }