使用角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保留在您的構造函數中，因爲您希望在渲染組件時對其進行實例化。

只需將您的邏輯移動到其他函數就可以了。

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