如何在Angular中实现依赖注入（DI）？-AngularJS面试指南

当前位置:　首页>> 技术小册>> AngularJS面试指南

答案：

在Angular中，依赖注入（Dependency Injection，DI）是一个非常重要的概念。通过DI，组件可以获取到其所依赖的服务（Service）实例，而不需要自己创建这些实例。这种方式不仅减少了代码量，还使得代码更加可维护和可测试。

要在Angular中实现依赖注入，可以按照以下步骤进行：

创建服务
首先需要创建一个服务，服务是一个普通的类，它可以提供一些公共的方法和属性，供组件使用。服务可以通过@Injectable装饰器进行注解，这样Angular就知道它是一个可注入的服务。

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private users = ['Alice', 'Bob', 'Charlie'];

getUsers() {
    return this.users;
  }

addUser(user: string) {
    this.users.push(user);
  }
}
```
注册服务
服务创建好之后，需要在模块中注册服务，以便Angular能够识别它们并进行依赖注入。可以在NgModule的providers数组中注册服务，也可以在组件的providers数组中注册服务，这样只有该组件及其子组件才能使用该服务。

```asp
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
注入服务
服务注册好之后，就可以在组件中使用依赖注入来获取服务实例了。可以通过构造函数注入服务，也可以通过属性注入服务。

```asp

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Users</h1>
    <ul>
      <li *ngFor="let user of users">{{user}}</li>
    </ul>
    <input [(ngModel)]="newUser">
    <button (click)="addUser()">Add User</button>
  `
})
export class AppComponent {
  users: string[];
  newUser = '';

constructor(private userService: UserService) {}

ngOnInit() {
    this.users = this.userService.getUsers();
  }

addUser() {
    this.userService.addUser(this.newUser);
    this.newUser = '';
    this.users = this.userService.getUsers();
  }
}
```
在上面的例子中，通过构造函数注入了UserService服务，并在ngOnInit生命周期钩子函数中获取了服务中的用户列表。同时，也通过属性绑定的方式，将新用户的值双向绑定到输入框中，当用户点击添加按钮时，就可以通过服务将新用户添加到列表中了。

该分类下的相关小册推荐：

AngularJS学习指南

Angularjs入门教程