Angular 中如何使用 Service 和 Factory-JavaScript中文网-JavaScript教程资源分享门户

在 Angular 中，Service 和 Factory 是用于共享代码和数据的两种常用设计模式。它们都是用来创建可重用代码的方式，但它们之间还是有区别的。本文将会深入探讨 Angular 中如何使用 Service 和 Factory。

什么是 Service

Service 是一种 Angular 的一个基础构造，它是一个实例化对象，用于共享业务逻辑和数据，由注入器来创建和管理它。在服务中，我们可以使用依赖注入（Dependency Injection）方式来获取其他组件、服务等需要的组件，来进行处理。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor() { }

  private products = [
    { name: 'product1', price: 100 },
    { name: 'product2', price: 200 },
    { name: 'product3', price: 300 }
  ];

  public getProducts(): Product[] {
    return this.products;
  }
}

在上面的代码中，我们定义了一个名为 ProductService 的 Service 并注入了 @Injectable() 装饰器。在构造函数中，我们初始化了一些数据，提供了一个名为 getProducts() 的函数来获取这些数据。注意我们使用了 private 来定义了一个私有变量，这样在外部就无法直接访问或修改它们。

在其他组件或服务中，我们可以使用依赖注入的方式来获取 ProductService，在构造函数中声明依赖：

import { Component } from '@angular/core';
import { ProductService } from './services/product.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let product of products">{{product}}</li>
    </ul>
  `
})
export class AppComponent {
  
  constructor(
    private productService: ProductService
  ) {}

  public products: Product[];

  ngOnInit(): void {
    this.products = this.productService.getProducts();
  }
}

在这个例子中，AppComponent 依赖于 ProductService 来获取数据并展示到模板上。在组件中，我们声明了一个名为 productService 的私有变量并通过构造函数注入它，在 ngOnInit() 方法中使用 productService 获取数据，最后将数据展示到模板上。

什么是 Factory

Factory 也是一种 Angular 的基本构造，它是一个自定义的函数，可以返回任何类型的对象，包括 Service。Factory 常用于实现单例模式，可以在多个组件中共享实例化对象。

import { Injectable } from '@angular/core';

@Injectable()
export class ProductServiceFactory {

  private products = [
    { name: 'product1', price: 100 },
    { name: 'product2', price: 200 },
    { name: 'product3', price: 300 }
  ];

  public getProductService(): ProductService {
    return new ProductService(this.products);
  }

  constructor() { }
}

export class ProductService {

  private readonly products: Product[];

  constructor(products: Product[]) {
    this.products = products;
  }

  public getProducts(): Product[] {
    return this.products;
  }
}

在上面的代码中，我们定义了两个类，一个叫 ProductServiceFactory 和一个叫 ProductService 的，它们之间的关系是 Factory 通过 getProductService() 方法创建了一个 Service 对象 ProductService 实例，并将数据传递给它。

在其他组件或服务中，我们可以使用依赖注入的方式来获取 ProductService，并且由于 ProductServiceFactory 实现的是单例模式，所以无论在哪个组件或服务中获取到的 ProductService 都是同一个实例：

import { Component } from '@angular/core';
import { ProductService, ProductServiceFactory } from './services/product.service.factory';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let product of products">{{product}}</li>
    </ul>
  `
})
export class AppComponent {
  
  constructor(
    private productService: ProductService
  ) {}

  public products: Product[];

  ngOnInit(): void {
    this.products = this.productService.getProducts();
  }
}

Service 和 Factory 的区别

在上述例子中，我们可以看到 Service 和 Factory 的一些区别：

Service 是一个对象实例，可以注入到其他组件或服务中使用；Factory 是一个可以返回任何类型的自定义函数，可用于创造实例、对象等等
Service 可以在模块中通过依赖注入来管理，也可以在组件、类中通过直接引用来使用；Factory 一般前半部分是一个 Service 代码，后面部分是工厂模式相关的代码
Service 实例是独立的，由注入器来维护、依赖注入；Factory 可以创建任意类型的对象，虽然在上面的例子中我们是用反射技术来创建的 Service 实例，但并不是唯一的选择

总结

Angular 中的 Service 和 Factory 都是用来创建可重用组件和数据的方式。Service 适合于管理并共享业务逻辑和数据，而 Factory 则适合于创建单例模式、其他对象等等。Service 和 Factory 的使用方式也是不同的，需要根据具体情况来决定选择哪种方式，具体选择哪个方案还需要结合场景需求来决定。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a39be3add4f0e0ffbbf0d3

Angular 中如何使用 Service 和 Factory

什么是 Service

什么是 Factory

Service 和 Factory 的区别

总结

纠错反馈