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>
複製代碼