Angular2新手求助：如何将Service注入Component？

嘿，作为Angular新手，别担心，注入服务其实是很基础的操作，我一步步带你完成：

1. 完善你的Service配置 #

首先看你的ExampleService，我们需要确保它能被Angular的依赖注入系统识别。现在有两种常用方式：

方式一：使用providedIn: 'root'（推荐，Angular 6+适用） #

修改你的服务代码，给@Injectable装饰器加上配置，这样Angular会自动把这个服务注册为全局单例，不用手动在模块里添加：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root' // 关键配置，让服务全局可注入
})
export class ExampleService {
  // 构造函数注入HttpClient
  constructor(private http: HttpClient) {}

  // 可以写一个示例接口方法，方便后续调用
  fetchSampleData(): Observable<any> {
    return this.http.get('https://jsonplaceholder.typicode.com/todos/1')
      .map(response => response);
  }
}

方式二：在NgModule中注册服务（兼容Angular 2/4/5） #

如果你的项目是较早的Angular版本，就需要在AppModule的providers数组里注册服务：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ExampleService } from './example.service'; // 导入服务

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  providers: [ExampleService], // 在这里注册服务
  bootstrap: [AppComponent]
})
export class AppModule { }

这种方式下，你的服务只需要保留@Injectable()装饰器即可，不用加providedIn。

2. 导入必要的模块 #

因为你的服务用到了HttpClient，所以必须在AppModule的imports数组中添加HttpClientModule，否则会出现找不到HttpClient的错误，这一步刚才的代码已经包含了，别漏掉。

3. 在Component中注入并使用Service #

现在你可以在任意组件里注入这个服务了，比如在AppComponent里：

import { Component } from '@angular/core';
import { ExampleService } from './example.service'; // 先导入服务

@Component({
  selector: 'app-root',
  template: `
    <h2>从服务获取的数据：</h2>
    <pre>{{ fetchedData | json }}</pre>
  `
})
export class AppComponent {
  fetchedData: any;

  // 在构造函数中声明服务实例，Angular会自动注入
  constructor(private exampleService: ExampleService) {
    // 调用服务的方法，订阅获取数据
    this.exampleService.fetchSampleData().subscribe(data => {
      this.fetchedData = data;
    });
  }
}

关键注意点 #

• 确保服务的类名和文件名正确，导入路径别写错，不然会找不到服务。
• 如果是Angular 2，记得用RxJS的旧语法（你代码里的import 'rxjs/add/operator/map'是对的，新版本RxJS用pipe操作符，但Angular2用这种方式没问题）。
• 注入的时候要用private或者public修饰符，这样服务实例会成为组件的属性，方便在组件内使用。

这样一步步做完，你就能成功把Service注入到Component里啦，以后其他服务也可以用同样的方法操作~

内容的提问来源于stack exchange，提问作者user9502376