在組件功能內使用angular 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

您可以在模板中使用組件方法（例如loadData一個）添加一個偵聽器（帶有(click)表達式）：

@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 2

您應該使foursquareApi成為該類的成員（私有/公共/受保護）。 否則，將無法在構造函數外部訪問它。

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

我將在我的答案中添加一些見解。

您可以將FourSquareService保留在構造器中，因為您希望在呈現組件時實例化它。

只需將您的邏輯移至其他函數即可。

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

使服務在構造函數中受保護，並在裝入時對構造函數中的服務進行任何調用。

當您想用於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);
 }