使用角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); }