共享服务在angular 2中不起作用

我正在尝试创建一个共享服务，用于访问country-detail.component.ts组件的数据。我出错了。我无法从countrydetailcomponent访问数据。如何解决这个问题

country-detail.component.ts（31,44）：类型“（）=>Observable”上不存在属性“subscribe”。）

国家/地区.服务.ts

  import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { environment } from 'environments/environment';
  import 'rxjs/Rx';
  import 'rxjs/add/operator/map';

  import {Countries} from '../countries';

  @Injectable() 

  export class CountriesService {

    constructor(private http: Http) {}

    Countries:Countries;

    getCountries() {
       if ( this.Countries) { 
        return Observable.of(this.Countries); 
      } else { 
       return this.http.get(environment.ApiEndPointURLGetCities)
        .map(this.extractData);
      }
    }

    private extractData(res: Response) {      
      let Countries = res.json();   
      return Countries || { };
    }

  }

  export interface Countries {
    Status: Number;
    msg: String;
    categorylist: any[];
  }

import { Component, OnInit }      from '@angular/core';
import { Router,ActivatedRoute, Params } from '@angular/router';

import { Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/observable/of'; 

import { CountriesService }  from '../services/countries.services';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'country-detail.component.html',
  styleUrls: [ './country-detail.component.css' ],
  providers:[CountriesService],
})


export class CountryDetailComponent implements OnInit {  
    public edited = true;      
    offset = 100;
    errorMessage: string;

    constructor(
       private _CountriesService: CountriesService            
    ) { 

       this._CountriesService.getCountries.subscribe((observer) => {
        console.log('Subscribe component', JSON.parse(observer._body));
      });
    }

    ngOnInit(): void {      

    } 
}


export interface Cities {
  Status: String;
  msg: String;
  categorylistvalues: any;
}

国家/地区详细信息.component.ts

  import { Injectable } from '@angular/core';
  import { Http, Response } from '@angular/http';
  import { Observable } from 'rxjs/Observable';
  import { environment } from 'environments/environment';
  import 'rxjs/Rx';
  import 'rxjs/add/operator/map';

  import {Countries} from '../countries';

  @Injectable() 

  export class CountriesService {

    constructor(private http: Http) {}

    Countries:Countries;

    getCountries() {
       if ( this.Countries) { 
        return Observable.of(this.Countries); 
      } else { 
       return this.http.get(environment.ApiEndPointURLGetCities)
        .map(this.extractData);
      }
    }

    private extractData(res: Response) {      
      let Countries = res.json();   
      return Countries || { };
    }

  }

  export interface Countries {
    Status: Number;
    msg: String;
    categorylist: any[];
  }

import { Component, OnInit }      from '@angular/core';
import { Router,ActivatedRoute, Params } from '@angular/router';

import { Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/observable/of'; 

import { CountriesService }  from '../services/countries.services';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'country-detail.component.html',
  styleUrls: [ './country-detail.component.css' ],
  providers:[CountriesService],
})


export class CountryDetailComponent implements OnInit {  
    public edited = true;      
    offset = 100;
    errorMessage: string;

    constructor(
       private _CountriesService: CountriesService            
    ) { 

       this._CountriesService.getCountries.subscribe((observer) => {
        console.log('Subscribe component', JSON.parse(observer._body));
      });
    }

    ngOnInit(): void {      

    } 
}


export interface Cities {
  Status: String;
  msg: String;
  categorylistvalues: any;
}

Ngmodule

  @NgModule({
      imports: [   
        BrowserModule,
        FormsModule,    
        AppRoutingModule,
        HttpModule,
        ModalModule,    
        NgbModule.forRoot(),   

      ],
      declarations: [
        AppComponent,    
        HomepageComponent,
        HeaderComponent,
        FooterComponent,    
        CountryDetailComponent,   
      ],

      providers: [ CitiesService, ModalBackdropComponent,CountriesService,Title,  
        { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
        ],
      bootstrap: [ AppComponent]


    })
    export class AppModule { }  

控制台日志

应该是

this._CountriesService.getCountries().subscribe(...)

getCountries是方法，而不是属性

更新 将您的服务放在

@NgModule

装饰器中的

提供者

数组中。

它应该是

this._CountriesService.getCountries().subscribe(...)

getCountries是方法，而不是属性

更新

---

将您的服务放入

@NgModule

decorator的

提供者

阵列中。

有什么问题Error@DenisTsoi，i获取country-detail.component.ts（31,44）：类型“（）=>Observable.”上不存在属性“subscribe”。）Terror错误是什么Error@DenisTsoi，i获取country-detail.component.ts（31,44）：类型“（）=>Observable.”上不存在属性“subscribe”。）terrorI尝试使用上述代码。但是我犯了一个错误<代码>未处理的承诺拒绝：组件国家服务不是任何NgModule的一部分，或者该模块尚未导入到您的模块中；区域：；任务：承诺；Value:ZoneAwareError{uuuuuu zone\u symbol\uuuu错误：错误：组件countries服务不是任何NgModule的一部分，或者模块没有导入到……}错误：组件countries服务不是任何NgModule的一部分，或者模块没有导入到您的模块。我尝试了这个console.log（this.\u countries服务.getCountries（））@vel该错误是不言自明的-您需要将

CountriesService

添加到

@NgModule

中，将您的服务放入@NgModule中的providers数组中，我只能在控制台日志中看到这一点

Observable{{u isScalar:false，source:Observable，operator:MapOperator}operator:MapOperator source:Observable{u isScalar:false{u_________________:Object

我尝试了上面的代码。但是我犯了一个错误<代码>未处理的承诺拒绝：组件国家服务不是任何NgModule的一部分，或者该模块尚未导入到您的模块中；区域：；任务：承诺；Value:ZoneAwareError{uuuuuu zone\u symbol\uuuu错误：错误：组件countries服务不是任何NgModule的一部分，或者模块没有导入到……}错误：组件countries服务不是任何NgModule的一部分，或者模块没有导入到您的模块。我尝试了这个console.log（this.\u countries服务.getCountries（））@vel该错误是不言自明的-您需要将

CountriesService

添加到

@NgModule

中，将您的服务放入@NgModule中的providers数组中，我只能在控制台日志中看到这一点<代码>可观测{{u isScalar:false，源：可观测，运算符：MapOperator}运算符：MapOperator源：可观测{u isScalar:false}原：对象