从 Angular 服务传递数据

Question

我在构造函数中有一个基本方法来计算一年中的当前月份并将值输出到 HTML 中。但是，我似乎无法让它工作。

我是 Angular 2 和 TypeScript 的新手，所以这可能只是一个愚蠢的错误:)

calendar.service.ts 文件：

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
@Injectable()
export class GetMonthsService {
  private GetMonthsRef = this.fbDB.list('xxxx/xxxx/months');
  private GetDaysRef = this.fbDB.list('xxxx/xxxxx/months/Days');
  private currentMonth;
  constructor(private fbDB: AngularFireDatabase) {}
  getMonthsList() {
    return this.GetMonthsRef;
  }
  getDaysList() {
    return this.GetDaysRef;
  }
  getCurrentMonth() {
        let currentMonth;
        let d = new Date();
        return this.currentMonth = d.getMonth();
        }
}

首页.html：

<ion-content padding>
    <ion-list-header>
      Current Month Page
    </ion-list-header>
          {{currentMonth}}
</ion-content>

Answer 1

组件，您希望在其中使用服务并显示HTML

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {appService} from '../../providers/app.service';
import {GetMonthsService} from '../../providers/calendar.service';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public appService : appService, public getMonthsService : GetMonthsService) {
    getMonthsService.getCurrentMonth();
  }
}

用于显示服务中内容的 HTML

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h2>From calendar service {{getMonthsService.currentMonth}}</h2>
</ion-content>

要获取数据的服务类

import { Injectable } from '@angular/core';
@Injectable()
export class GetMonthsService {
  private currentMonth : any;
  constructor() {}

  getCurrentMonth() {
        let d = new Date();
        this.currentMonth = d.getMonth();
        return this.currentMonth;
        }
}

您可以参考此处获取工作版本