服务

服务可以看作一个工具类，或者是前台与后台交互中，中间的那一层
理想的情况下，组件应该只处理用户与前台的交互，所有数据，比如从服务器获取数据，验证用户输入的值等操作都应该由服务层来处理

首先创建一个服务：

1
ng generate service tool

这个命令会创建一个名为tool的服务，会在项目中创建两个文件

  • tool.service.ts
  • tool.service.spec.ts

一般我们只需要在tool.service.ts中写代码就行了

在tool.service.ts中写入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ToolService {

  constructor() { }

  public getList(): string[]{
    return ["1", "2", "3", "", "1"];
  }
}

这里新加了一个getList方法，这个方法会返回一个string数组

然后在app.component.ts写入：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { Component, OnInit } from '@angular/core';
import { ToolService } from './tool.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  constructor(private toolService: ToolService) { }

  strList: string[] = [];

  ngOnInit(){
    this.strList = this.toolService.getList();
  }

  detailClick(event: string){
    alert("detail " + event + " click");
  }
}

这样，app组件在初始化时就会使用tool服务的getList方法给strList赋值

依赖注入

这个service用了一个@Injectable装饰器，这代表angular会把这个类标记为依赖注入系统的参与者之一
依赖注入详细可以参考https://angular.cn/guide/architecture-services#dependency-injection-di
简单来说可以看作一个全局的静态类，可以在组件初始化时传入，给组件进行数据操作

使用命令创建的服务会自动加上依赖注入的@Injectable装饰器
想要在组件中依赖注入，只要写入：

1
  constructor(private toolService: ToolService) { }

这段代码的意思是，组件初始化时，将ToolService注入到组件中
constructor就是初始化的方法，ToolService就是之前创建的服务类名