如何在Angular自定义类中注入服务？

嗨，我来帮你搞定这个SortState类注入加载指示器服务的问题～确实组件之外的自定义类没法直接用Angular常规的依赖注入，不过有好几种实用的解决办法，咱们一个个说：

方法一：直接传入服务实例（最直白） #

如果你只是在组件里临时创建SortState的实例，那最简单的方式就是在组件里先拿到服务实例，再传给SortState的构造函数。

比如你的组件代码：

import { Component } from '@angular/core';
import { LoadingIndicatorService } from './loading-indicator.service';
import { SortState } from './sort-state';

@Component({...})
export class YourTableComponent {
  constructor(private loadingService: LoadingIndicatorService) {}

  initSortState() {
    // 把服务实例直接传给SortState
    const sortState = new SortState(this.loadingService);
  }
}

然后在SortState类里直接用：

import { LoadingIndicatorService } from './loading-indicator.service';

export class SortState {
  // 构造函数直接接收服务
  constructor(private loadingService: LoadingIndicatorService) {}

  doSort() {
    // 直接调用加载服务的方法
    this.loadingService.show();
    // 这里写你的排序、分页逻辑
    // ...
    this.loadingService.hide();
  }
}

方法二：传入Injector实例（灵活适配多服务场景） #

如果你的SortState需要用到多个服务，不想一个个传的话，可以传Angular的Injector实例，然后在类里用它获取需要的服务。

组件里先注入Injector：

import { Component, Injector } from '@angular/core';
import { SortState } from './sort-state';

@Component({...})
export class YourTableComponent {
  constructor(private injector: Injector) {}

  initSortState() {
    const sortState = new SortState(this.injector);
  }
}

SortState类里通过Injector获取服务：

import { Injector } from '@angular/core';
import { LoadingIndicatorService } from './loading-indicator.service';

export class SortState {
  private loadingService: LoadingIndicatorService;

  constructor(private injector: Injector) {
    // 用injector.get()获取服务实例
    this.loadingService = this.injector.get(LoadingIndicatorService);
  }

  // 之后就能正常调用服务方法啦
  startLoading() {
    this.loadingService.show();
  }
}

你之前听说的ReflectiveInjector确实已经被废弃了，现在用Injector就完全足够啦。

方法三：把自定义类做成可注入服务（最符合Angular设计） #

如果你的SortState本身是一个带业务逻辑的类，需要被多个组件复用，那直接把它变成Angular可管理的服务就行，这样就能在它的构造函数里直接注入其他服务了。

给SortState加上@Injectable装饰器：

import { Injectable } from '@angular/core';
import { LoadingIndicatorService } from './loading-indicator.service';

@Injectable({
  providedIn: 'root' // 全局单例，或者注册到对应模块/组件的providers里
})
export class SortState {
  // 构造函数直接注入加载服务
  constructor(private loadingService: LoadingIndicatorService) {}

  doSort() {
    this.loadingService.show();
    // 排序分页逻辑...
    this.loadingService.hide();
  }
}

然后在组件里直接注入SortState就行：

import { Component } from '@angular/core';
import { SortState } from './sort-state';

@Component({...})
export class YourTableComponent {
  constructor(private sortState: SortState) {
    // 直接使用sortState的方法
    this.sortState.doSort();
  }
}

你可以根据自己的场景选合适的方法：如果只是临时用的实例，传服务实例最直接；如果需要多服务支持，传Injector更灵活；如果是复用性高的逻辑类，做成可注入服务最省心～

内容来源于stack exchange