Angular中的服务

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/12/04/Angular%E4%B8%AD%E7%9A%84%E6%9C%8D%E5%8A%A1/

摘要

本文主要讲述了：

新建服务
将服务注入组件

正文

新建服务

示例：

在src/app/目录内创建名为services的目录
在src/app/services/目录内创建jobs.service.ts、jobs.service.spec.ts

1
2
3

#!/usr/bin/env bash

ng generate service services/jobs

将服务注入组件

示例：

my-angular/src/app/app.component.html

<div *ngFor="let item of jobList; trackBy: jobTrackBy">
  <div>{{ item.jobId }}</div>
  <div>{{ item.jobName }}</div>
  <div>{{ item.salary }}</div>
  <div>{{ item.companyName }}</div>
</div>
<button (click)="getJobList()">Get Job List</button>

my-angular/src/app/app.component.ts

import { Component } from '@angular/core';
import { Job } from './types/Job';
import { JobsService } from './services/jobs.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  jobList: Job[] = [];

  jobTrackBy(index: number, item: Job) {
    return item.jobId;
  }

  getJobList() {
    this.jobList = this.jobService.getList();
  }

  constructor(private jobService: JobsService) {}
}

my-angular/src/app/services/jobs.service.ts

import { Injectable } from '@angular/core';
import { Job } from '../types/Job';

@Injectable({
  providedIn: 'root',
})
export class JobsService {
  getList(): Job[] {
    return [
      {
        jobId: 1,
        jobName: '会计',
        salary: 1000,
        companyName: 'A有限责任公司',
        isVip: 1,
      },
      {
        jobId: 2,
        jobName: '销售',
        salary: 2000,
        companyName: 'B有限责任公司',
        isVip: 0,
      },
      {
        jobId: 3,
        jobName: '主管',
        salary: 3000,
        companyName: 'B有限责任公司',
        isVip: 0,
      },
    ];
  }

  constructor() {}
}

示例：跨组件使用服务

my-angular/src/app/app.component.html

<app-login-form></app-login-form>

<div>
  <p>{{ loginService.userInfo["username"] }}</p>
  <p>{{ loginService.userInfo["password"] }}</p>
</div>

my-angular/src/app/app.component.ts

import { Component } from '@angular/core';
import { LoginService } from './services/login.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public loginService: LoginService) {}
}

my-angular/src/app/foo/foo.component.html

<div>
  <label for="username">username: </label>
  <input
    type="text"
    name="username"
    id="username"
    [value]="loginService.userInfo['username']"
    (input)="onInput($event)"
  />

  <label for="password">password: </label>
  <input
    type="password"
    name="password"
    id="password"
    [value]="loginService.userInfo['password']"
    (input)="onInput($event)"
  />
</div>

my-angular/src/app/components/login-form.component.ts

import { Component, OnInit } from '@angular/core';
import { LoginService } from 'src/app/services/login.service';

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html',
  styleUrls: ['./login-form.component.css'],
})
export class LoginFormComponent implements OnInit {
  onInput(event: Event) {
    const target = event.target as HTMLInputElement;
    this.loginService.updateUserInfo(target.name, target.value);
  }

  constructor(public loginService: LoginService) {}

  ngOnInit(): void {}
}

my-angular/src/app/types/LoginInfo.ts

interface LoginInfo {
  [key: string]: string;
}

export { LoginInfo };

my-angular/src/app/services/login.service.ts

import { Injectable } from '@angular/core';
import { LoginInfo } from '../types/LoginInfo';

@Injectable({
  providedIn: 'root',
})
export class LoginService {
  userInfo: LoginInfo = {
    username: '',
    password: '',
  };

  updateUserInfo(key: string, name: string) {
    this.userInfo[key] = name;
  }

  constructor() {}
}