angular配置服务与注入的步骤

一、在当前项目目录下输入命令行创建服务

输入下面的命令，就会自动创建2个文件hero.service.spec.ts跟hero.service.ts ，第一个为用于单元测试的文件，第二个为服务的配置文件

ng g service service/hero

hero.service.ts

import { Injectable } from '@angular/core';

//@injectable的意思是声明该服务类可被注入到其他的service、component或者其他实例中去
@Injectable({
  providedIn: 'root'		//providedIn 声明服务提供给哪个模块使用，
  							//root 实际上是 AppModule 的别名，因此不需要额外导入 AppModule。
})
export class HeroService {

  constructor() { }
  get(){
    return '这是服务里的数据'
  }
}

二、在app.module.ts文件中声明服务

先import导入服务，然后再往providers数组中添加服务名

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HeroService} from './service/hero.service';	

import { AppComponent } from './app.component';
//NgModule 最根本的意义是帮助开发者组织业务代码 
//开发者可以利用 NgModule 把关系比较紧密的组件组织到一起
//来定义本模块的元数据
@NgModule({
  //用来放组件、指令、管道的声明
  declarations: [
    AppComponent,
  ],
  //用来导入项目中需要的模块
  imports: [
    BrowserModule,
    FormsModule
  ],
  //需要使用的 Service 都放在这里。
  providers: [
    HeroService
  ],
  //定义启动组件
  bootstrap: [AppComponent]
})
export class AppModule { }

三、注入组件中

import { Component, OnInit,ViewChild } from '@angular/core';
import { HeroService } from '../../service/hero.service'	//导入服务文件
//这其实需要当做一个整体来看，上面一段被称作装饰器，用于装饰AppComponent这个class：
@Component({
  selector: 'app-home',   //定义组件的选择器，即如何引用组件，相当于组件的id
  templateUrl: './home.component.html', //定义组件的html文件
  styleUrls: ['./home.component.scss']  //定义组件的样式文件
})
export class HomeComponent implements OnInit {
  //也可以使用下面定义属性的来使用服务（不提倡）
  //public heroService:HeroService = new HeroService();
  constructor(public heroService:HeroService) { 	//把服务当作参数注入到构造函数中去
    console.log(heroService.get());				//使用服务方法 因为在构造函数里，可以不用加this		
  }
  getChild(){
    console.log(this.heroService.get());		//使用服务里的方法
  }
}

服务在本人目前的理解就是把组件共用的方法提取出来，以供多个组件使用，刚刚开始学习，可能有的解释不到位，只做笔记防止以后忘记！