Angular 4依赖注入深入解析：组件与服务注入

"这篇教程是Angular 4依赖注入学习系列的第二部分，主要讲解组件服务注入。教程涵盖了一系列关于依赖注入的主题，包括依赖注入简介、组件服务注入、ClassProvider、FactoryProvider、配置依赖对象、Injectable装饰器、ValueProvider以及InjectToken的使用。" 在Angular 4中，依赖注入（Dependency Injection，简称DI）是一种设计模式，用于简化应用程序的复杂性，特别是处理对象之间的依赖关系。在本教程中，我们将深入探讨如何在组件中利用服务进行注入。 首先，了解如何创建Angular组件至关重要。通过使用`@Component`装饰器，我们可以定义组件的元数据，如选择器、模板和类。例如： ```typescript @Component({ selector: 'app-root', template: `<h1>{{title}}</h1>` }) export class AppComponent { title: string = 'AppWorks'; } ``` 接着，我们需要知道如何创建Angular服务。服务通常用于封装业务逻辑或数据操作，可以被多个组件共享。创建服务时，我们会使用`@Injectable`装饰器： ```typescript @Injectable() export class DataService { getData() { return ['Angular', 'React', 'Vue']; } } ``` 一旦服务创建完毕，我们就可以在组件中注入并使用它。假设我们有一个名为`HeroComponent`的组件，想要展示英雄列表，我们可以这样做： ```typescript import { Component, OnInit } from '@angular/core'; import { DataService } from './data.service'; // 引入服务 @Component({ selector: 'app-hero', template: ` <ul> <li *ngFor="let hero of heros"> ID: {{ hero.id }} - Name: {{ hero.name }} </li> </ul> ` }) export class HeroComponent implements OnInit { heros: Array<{ id: number }>; constructor(private dataService: DataService) { } // 在构造函数中注入服务 ngOnInit() { this.heros = this.dataService.getData().map(item => ({ id: 0, name: item })); } } ``` 这里，我们在`HeroComponent`的构造函数中注入了`DataService`，并在`ngOnInit`生命周期钩子中调用服务的方法获取数据，并将其分配给组件属性`heros`。`private`关键字表示该服务实例仅限于组件内部使用。 除了直接在构造函数中注入，Angular还提供了多种方式来配置依赖注入，例如： 1. ClassProvider：通过类类型提供依赖，Angular会自动创建服务实例。 2. FactoryProvider：允许我们自定义创建服务实例的工厂方法。 3. ValueProvider：用于提供常量值，而不是服务实例。 4. InjectToken：当需要为不同模块或组件提供不同实现时，可以使用自定义令牌来标识依赖。 整个教程系列将逐步引导你理解并熟练运用这些概念，帮助你更高效地构建Angular应用。通过学习这个系列，你将能够更好地掌握依赖注入的核心原理，以及如何在Angular 4项目中灵活地管理组件和服务的依赖关系。