Angular 2- подписка не является ошибкой функции

Question

Я пытаюсь подписаться на услугу, она создается без ошибок, но я получаю сообщение об ошибке "this.myService.getAll не является функцией" при просмотре в браузере.

Обслуживание:

import { Injectable } from '@angular/core';
import { Http } from "@angular/http";


@Injectable()

export class MyServiceService {

  url:string;

  constructor(private http:Http) {
    this.url = "http://127.0.0.1:8000/scrumboard";
  }

  public getAll(): any {
    let result = this.http.get(this.url+"/lists");
    return result;
  }
}

Составная часть:

import { Component, OnInit } from '@angular/core';

import { MyServiceService } from '../my-service.service';
import { Response } from '@angular/http';


@Component({
  selector: 'app-dashboard',
  templateUrl: './full-layout.component.html'
})
export class FullLayoutComponent {

  public disabled: boolean = false;
  public status: {isopen: boolean} = {isopen: false};

  public toggled(open: boolean): void {
    console.log('Dropdown is now: ', open);
  }

  public toggleDropdown($event: MouseEvent): void {
    $event.preventDefault();
    $event.stopPropagation();
    this.status.isopen = !this.status.isopen;
  }

  constructor(public myService:MyServiceService) {

  }
  public subscribe() {
    this.myService.getAll().subscribe(
      (data: Response) => console.log(data)
    );
  }
}

Наконец, app.module.ts:

providers: [{
    provide: MyServiceService,
    useClass: HashLocationStrategy,
  }],

Есть идеи, что я делаю не так?

Answer 1

Вы должны объявить своего провайдера как:

providers: [
    MyServiceService
]

Потому что вы используете HashLocationStrategy класс вместо вашего класса обслуживания, и HashLocationStrategy не иметь getAll функция.

Другое дело, чтобы внедрить ваш сервис как частный:

constructor(private myService:MyServiceService)

И называть это subscribe функция, которую вы добавили из ngOnInit

ngOnInit() {
    this.subscribe();
}

Answer 2

Это плохое решение, чтобы называть метод, как subscribe(), потому что это может сбить вас с толку и другого разработчика, лучше назвать его следующим образом:

public subscribetoGetAll(...;

Ваше решение состоит в том, чтобы вызвать этот метод в конструкторе или ngOnInit (это лучше сделать в ngOnInit):

export class FullLayoutComponent, OnInit {

  public disabled: boolean = false;
  public status: {isopen: boolean} = {isopen: false};

  public toggled(open: boolean): void {
    console.log('Dropdown is now: ', open);
  }

  public toggleDropdown($event: MouseEvent): void {
    $event.preventDefault();
    $event.stopPropagation();
    this.status.isopen = !this.status.isopen;
  }

  constructor(private myService:MyServiceService) {

  }

  ngOnInit() { // ngOnInit added
    this.subscribetoGetAll();  // <-- here you calling your method
  }


  public subscribetoGetAll() {
    this.myService.getAll().subscribe(
      (data: Response) => console.log(data)
    );
  }
}