阅读 1037

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';
复制代码
  1. 添加方法以返回数据
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)
  }
}
复制代码
  1. service-demo.component.html页面展示拿到的数据:
<div>
    <h2>在【服务】中拿到的数据:</h2>
    <ul>
        <li *ngFor="let i of xuxuTestMock" (click)="test(i)">{{i.name}}</li>
    </ul>
</div>
复制代码
文章分类
前端
文章标签