Angular服务

为什么需要服务？

组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。

这次将创建一个 XuxuService，依靠 Angular 的依赖注入机制把它注入到 ServeDemoComponent 的构造函数中。

服务是在多个“互相不知道”的类之间共享信息的好办法。

一、创建服务

在终端输入：

ng generate service 服务名

我输入的如下，即我的服务名为xuxu：

ng generate service xuxu

执行完后，src/app/xuxu.service.ts 中自动生成 XuxuService

二、在XuxuService中（xuxu.service.ts）获取数据

1. 导入class类

import { XuxuClass } from './xuxu-class';

2. 添加方法以返回数据

export class XuxuService {

  constructor() { }
  getXuxuTestMock(): XuxuClass[] {
	let data = [1,2,3]
    return data;
  }
}

三、提供（provide） XuxuService

在终端输入：

ng generate service 服务名 --module=app

四、新建页面组件

ng generate component service-demo

五、在组件内使用

1. service-demo.component.ts页面从xuxu服务中拿到数据：

import { Component, OnInit } from '@angular/core';
import { XuxuService } from '../xuxu.service';

@Component({
  selector: 'app-service-demo',
  templateUrl: './service-demo.component.html',
  styleUrls: ['./service-demo.component.css']
})
export class ServiceDemoComponent implements OnInit {

  constructor(private xuxuService: XuxuService) { }

  ngOnInit() {
    // 调用getXuxuTestMock方法
    this.getXuxuTestMock();
  }
  
  // 初始化xuxuTestMock
  xuxuTestMock
  getXuxuTestMock(): void {
    this.xuxuTestMock = this.xuxuService.getXuxuTestMock();
    console.log('xuxuTestMock:', this.xuxuTestMock)
  }
}

2. service-demo.component.html页面展示拿到的数据：

<div>
    <h2>在【服务】中拿到的数据：</h2>
    <ul>
        <li *ngFor="let i of xuxuTestMock" (click)="test(i)">{{i.name}}</li>
    </ul>
</div>