怎么在Angular4项目中对依赖进行注入

在Angular4项目中，注入依赖是实现依赖注入的关键步骤之一。本文将从以下几个方面介绍如何在Angular4项目中对依赖进行注入：

1. 依赖注入的概念

2. 在Angular4中注入依赖的方法

3. 全局和局部的注入依赖

4. 实战例子：在Angular4中注入服务

一、依赖注入的概念

依赖注入是一个设计模式，它允许对象显式声明它们需要的外部依赖项，而不是尝试创建或寻找依赖项。Angular使用依赖注入来提供组件、服务、指令等的实例依赖。依赖注入可以帮助我们解决代码复杂度、测试、可维护性等问题。

依赖注入通过以下三个过程来完成：

1. 创建依赖项实例。

2. 将这些依赖项注入到需要它们的组件中。

3. 最终使用被注入的依赖项。

二、在Angular4中注入依赖的方法

在Angular4中，我们可以使用@injectable装饰器来实现依赖注入。@injectable装饰器可应用于服务、指令、管道等任意类型的类，使它们成为依赖注入对象。我们需要在提供前使用@Injectable()装饰器来建立一个服务，并为其提供必要的元数据，以便其他组件可以使用。

接下来，我们需要将需要注入的服务添加到providers数组中，将该数组作为NgModule的metadata之一。NgModule是用来定义应用程序的各个部分（组件、服务等）之间的依赖关系的，它由@NgModule装饰器定义。

以下是一个简单的注入依赖的示例，其中CarService是一个服务，它将在其它组件中被注入：

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

@Injectable()
export class CarService {
  getCar() {}
}

@Component({
  selector: 'car',
  template: I have a {{car.color}} car
})
export class CarComponent {
  car: any;

  constructor(private carService: CarService) {
    this.car = this.carService.getCar();
  }
}

@NgModule({
  declarations: [
    CarComponent
  ],
  providers: [
    CarService
  ],
  bootstrap: [CarComponent]
})
export class AppModule { }

在CarComponent中，我们使用constructor注入了CarService。在AppModule中，我们将CarService添加到providers数组中。

Angular会根据CarService的元数据来创建它的实例，并注入到CarComponent中。现在我们可以访问CarService中的所有公共方法和属性。

三、全局和局部的注入依赖

Angular提供了两种不同的注入依赖的方式：全局和局部依赖注入。

全局依赖注入：在整个应用中都可以使用，比如一些常用的服务。

局部依赖注入：只在特定的组件或指令中使用。

全局依赖注入通常是在AppModule中注册的，而局部依赖注入通常是在组件或指令级别设定的。

四、实战例子：在Angular4中注入服务

下面我们以全局的依赖注入为例来介绍如何在Angular4中注入服务。

1. 创建服务

首先，我们需要创建一个服务。服务是一个字符、数字、图片或任何其他类型的数据。服务可以被视为一组可共享的功能，可以在组件中通过服务进行调用。以下是一个简单的服务示例：

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

@Injectable()
export class ProductService {
    products: Array<any> = [
        { name: 'Product 1', price: 100 },
        { name: 'Product 2', price: 200 },
        { name: 'Product 3', price: 300 },
        { name: 'Product 4', price: 400 },
        { name: 'Product 5', price: 500 }
    ];

    getProductList(){
        return this.products;
    }
}

在上面的例子中，我们使用@Injectable()装饰器来定义服务，并提供了getProductList方法来获取产品列表。

2. 在AppModule中注册服务

接下来，我们需要在AppModule中注册服务。要在全局应用程序中使用ProductService，将其添加到providers数组中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ProductService } from './product.service';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的例子中，我们将ProductService添加到providers数组中。

3. 在组件中使用服务

现在，我们已经在全局中注册了ProductService，我们可以在任何组件中使用它。

以下是一个简单的组件，在这个组件中，我们使用constructor注入了ProductService，并使用它来获取产品列表。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  products: Array<any>;

  constructor(private productService: ProductService) {
    this.products = productService.getProductList();
  }
}

在上面的例子中，我们使用ProductService的getProductList方法获取产品列表。

在这篇文章中，我们介绍了如何在Angular4项目中注入依赖项，并使用全局依赖注入的例子来说明这一概念。依赖注入可使Angular应用程序保持简单、可测试和可维护。