在组件功能内使用angular 2服务

Question

Here is an example of how I'm getting foursquare information within one of my components:

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

  }

}

This logs related objects to console on page load, however I want to achieve same functionality on click of a button or while users are typing, hence have it in separate function, however every time I remove foursquareApi : FoursquareService from constructor I get various errors.

Answer 1

You can add a listener (with the (click) expression) in your template that uses a method of your component (the loadData one for example):

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

Hope it helps you, Thierry

Answer 2

You should make the foursquareApi a member of the class (private/public/protected). Otherwise it is not accessible outside the constructor.

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 3

I'll add some insight to my answer.

You can leave the FourSquareService in your constuctor because you want it to instantiated when your component is rendered.

Just move your logic to an other function like so.

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 4

Make the service protected in constructor and do whatever call with the service in constructor for on load.

When you want to use for onClick or some action you can refer to the service inside onClick function .

 constructor(private myService: MyService) { //Do call with on load for this.
 }
 toggleHobbies() {
   this.showHobbies = !this.showHobbies;
   console.log(this.myService.getPosts());
   console.log(1);
 }