Angular服务

为何须要服务？

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

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

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

1、建立服务

在终端输入：

ng generate service 服务名
复制代码

我输入的以下，即个人服务名为xuxu：

ng generate service xuxu
复制代码

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

2、在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;
  }
}
复制代码

3、提供（provide） XuxuService

在终端输入：

ng generate service 服务名 --module=app
复制代码

4、新建页面组件

ng generate component service-demo
复制代码

5、在组件内使用

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>
复制代码