服务在angular2中变得未定义

Question

I am new to Angular2. 我是Angular2的新手。 I am trying to call the simple service from my component but when I try to call it I am getting service instance as undefined: 我试图从组件中调用简单服务，但是当我尝试调用它时，却得到了未定义的服务实例：

请在下面找到图像路径以供参考

Here is my code: 这是我的代码：

Index.html 的index.html

<!DOCTYPE html>
<html>

  <head>
   <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.js"></script>


    <script>
    System.config({
      // we want to import modules without writing .js at the end
      defaultJSExtensions: true,
      // the app will need the following dependencies
      map: {
        'angular2': 'node_modules/angular2',
        'rxjs': 'node_modules/rxjs',

      }
    });
    // and to finish, let's boot the app!
    System.import('built/bootstrap');
    </script>
  </head>

  <body>
    <app>Loading...</app>
  </body>

</html>

DataService DataService的

import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Hero }           from './hero';
import { Observable }     from 'rxjs/Observable';
@Injectable()

export class DataService{

    getData(){
    return "Hi I am a service response";
    }
}

Appcomponant.ts Appcomponant.ts

import { Component } from 'angular2/core';
 import './rxjs-operators';
 import { HeroService } from './toh/hero.service';
 import { HeroListComponent } from './toh/HeroListComponent';



@Component({
  selector: 'app',
  templateUrl: 'hero-list.component.html',
  providers:[]
})
export class AppComponent implements OnInit{ 
constructor (private _dataService: DataService) {}
 ngOnInit() { this.getData(); }

 private getData(){
 this._dataService.getData();
 }

    mode='this is test mode'


}

app.module.ts app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import {HeroComponent} from 'toh/hero-list-component'
import { AppComponent } from './app.component';
import { HeroService } from './toh/hero.service';
import { DataService } from './toh/DataService';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,

  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent],
  providers:[DataService]
})
export class AppModule {
}

I also tried to add the provider in both appcomponant.ts and app.module.ts but I am getting the error. 我也尝试在appcomponant.ts和app.module.ts中添加提供程序，但出现错误。 Please find the image url mention below: 请找到下面提到的图片网址：

Answer 1

In Appcomponant.ts, you are injecting dataService as a dependency but you have not imported it. 在Appcomponant.ts中，您将dataService作为依赖项注入，但尚未导入它。 You must call 你必须打电话

import { DataService } from './toh/DataService'

in order to inject it as a dependency in your constructor. 为了将其作为依赖项注入到您的构造函数中。

服务在angular2中变得未定义

问题描述

1 个解决方案

解决方案1
0 2018-01-10 17:46:56

服务在angular2中变得未定义

问题描述

1 个解决方案

解决方案1 0 2018-01-10 17:46:56

解决方案1
0 2018-01-10 17:46:56