Question

我想调用一个存在于 HomePage 类中的函数，该函数位于我想要使用该函数的（类 Popover ）之外，I＆＃39;我已经完成了一些研究，我想我需要做一些像依赖注入这样的事情，我已经尝试过一些教程，但我没有幸运地解决这个问题。

Popover类：

    @Component({
      template: `
        <div>
               <button ion-item *ngFor="let city of cities" (click)="switchToThisCity(city.cityName);close();">{{city.cityName | uppercase}}</button>
        </div>
      `
    })

        class MyPopover{
    static get parameters(){
      return [[Http], [ViewController]];
    }
     constructor(http, viewCtrl) {
      this.http    = http;
      this.viewCtrl = viewCtrl;
      //Async Call
      var getCities = new URLSearchParams();
      this.http.get('https://restApi.com/class/outlet', {headers: ParseHeaders}).subscribe(data => {
      this.cities = data.json().results;
      });
      ///
    }
     close() {
      this.viewCtrl.dismiss();
    }
    switchToThisCity(currentCity){
      //I WANT TO CALL THIS FUNCTION WHICH EXISTS ON HomePage CLASS
      return getQueries(currentCity);
    }
  }

主页分类：

  @Component({
    templateUrl: 'build/pages/home/home.html',
  })

        export class HomePage {
  static get parameters(){
      return [[NavController],[Http], [NavParams]];
    }

     // this.cartLength = this.cart.items.length;
    constructor() {}

   //I NEED TO USE THIS IN THE POPOVER CLASS

    getQueries(city){
    var cities = new URLSearchParams();
    cities.set('cityName', city);
   this.http.get('https://restApi.com/classes/citiesList', { search :   dishesParams, headers: ParseHeaders}).subscribe(data => {
   this.getCities = data.json().results;
   });
    }
 }

Answer 1

我会将getQueries方法提取到服务中：

@Injectable()
export class QueryService {

  constructor(http) {
    this.http = http;
  }

  static get parameters(){
    return [[Http]];
  }
}

并将其注入两个组件：

@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [ QueryService ]
})

export class HomePage {
  static get parameters(){
    return [[NavController],[NavParams], [QueryService];
  }

  constructor(nav, params, service) {
    this.service = service;
  }

  getQueries(city){
    this.service.getQueries(city)...
  }
}

和MyPopover类中的相同。

Answer 2

创建服务类

<强> cities.service

@Injectable()
export class CitiesService {
  getQueries(city) {
    var cities = new URLSearchParams();
    cities.set('cityName', city);
    return this.http.get('https://restApi.com/classes/citiesList', {
      search: dishesParams,
      headers: ParseHeaders
    }) // here we return an observable so we can subscribe to it in our class
  }

和在Popover :(与主页类相同）

export class MyPopover{ 
  constructor(private citiesService:CitiesService) {
  }

  // and this is how you use the function
  this.citiesService.getQueries().subscribe(data => {
   this.getCities = data.json().results;
   });
 }

更新：看一下这篇文章：http://nicholasjohnson.com/blog/how-to-do-everything-in-angular2-using-es6/

首先，任何东西都可以在Angular中注入，因此PetService可以只是一个新功能。

Angular DI机制会自动使用它来创建一个   单个注释器树的正确分支的本地单例。如果   你只有一个根注射器（由Angular 2自动制作）   bootstrap），这将是一个全局单例，就像Angular

这里的原则是创建一个处理请求并注入它的服务，返回一个可观察对象并订阅，然后你可以用响应做任何你想做的事......

Angular 2 - 调用当前类

2 个答案: