Angular依赖注入详解

坑吭吭

发布于 2023-10-16 16:07:06

2200

发布于 2023-10-16 16:07:06

文章被收录于专栏：一直在跳坑然后爬坑一直在跳坑然后爬坑

一、依赖注入基础

1.1 依赖注入的概念

依赖注入的基本思想是:将组件所依赖的服务提供者注入进来,而不是在组件内部直接创建。

1.2 依赖注入的优势

使用依赖注入的好处有:

降低组件之间的耦合度,提高可维护性。
使组件可重用和更易于测试。
能将不同的实现切换进来,提高程序灵活性。
统一管理依赖模块。

二、Angular中的依赖注入

Angular有自己的依赖注入框架,可以自动解析组件的依赖关系,避免了直接在组件中使用new一个服务的紧耦合方式。

2.1 @Injectable装饰器

@Injectable装饰器用于标记一个类为可注入的,可以被注入器实例化。

@Injectable的作用有:

声明可注入性
启用依赖注入
设置服务作用域
AOT编译优化

@Injectable({ 
  providedIn: 'root' // 设置为根作用域
})
export class UserService {

  constructor(private http: HttpClient) {} // 依赖会被注入

}

2.2 常见的依赖注入方式

构造函数注入

@Component({
  //...
})
export class MyComponent {

  constructor(private myService: MyService) { } // 构造函数注入

}

属性注入

@Component({
  //... 
})
export class MyComponent {

  @Inject(MyService) myService // 属性注入

  //...

}

直接从Injector获取

export class MyComponent {

  constructor(injector: Injector) {
   const myService = injector.get(MyService); // 从注入器获取
  }

}

2.3 依赖注入的实际示例

不使用依赖注入:

// user.service.ts
export class UserService {
  getUser() { 
    return { name: 'John' };
  }
}

// user.component.ts 
import { UserService } from './user.service';

@Component()
export class UserComponent {

  user;

  constructor() {
    const userService = new UserService(); // 组件内部直接创建服务
    this.user = userService.getUser(); 
  }

}

使用依赖注入:

// user.service.ts
@Injectable()  
export class UserService {
  getUser() {
    return { name: 'John' };
  }
}

// user.component.ts
@Component()
export class UserComponent {

  constructor(private userService: UserService) {} // 注入服务
  
  ngOnInit() {
    this.user = this.userService.getUser(); // 使用注入的服务
  }

}

三、高级用法

3.1 自定义注入器

@Injectable()
class CustomInjector extends Injector {

  constructor(@Inject(ENV_TOKEN) private env: string) { // 注入环境标记
    super();
  }

  get(token: any, notFoundValue?: any) {
    
    if (token === MyService) {
      return new MyService(this.env); // 根据环境返回服务实例
    }

    return super.get(token, notFoundValue); // 默认行为
  }

}

3.2 提供商配置

@Injectable支持的提供商配置:

providedIn - 指定服务的提供位置
useClass - 使用指定类作为服务提供商
useExisting - 别名一个现有的提供商
useFactory - 通过工厂函数提供服务实例
deps - 为工厂函数指定依赖项
useValue - 使用静态值作为服务实例

@Injectable({
  providedIn: 'root', 
  useClass: BetterLoggerService, // 指定实现类
  deps: [LogService], // 工厂函数依赖
  useFactory: (logService) => {  // 工厂函数
    return new BetterLoggerService(logService); 
  }
})
export class LoggerService {}