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

答案:

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

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

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

  1. import { Injectable } from '@angular/core';
  2. @Injectable({
  3. providedIn: 'root'
  4. })
  5. export class UserService {
  6. private users = ['Alice', 'Bob', 'Charlie'];
  7. getUsers() {
  8. return this.users;
  9. }
  10. addUser(user: string) {
  11. this.users.push(user);
  12. }
  13. }

注册服务
服务创建好之后,需要在模块中注册服务,以便Angular能够识别它们并进行依赖注入。可以在NgModule的providers数组中注册服务,也可以在组件的providers数组中注册服务,这样只有该组件及其子组件才能使用该服务。

  1. import { NgModule } from '@angular/core';
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { AppComponent } from './app.component';
  4. import { UserService } from './user.service';
  5. @NgModule({
  6. imports: [BrowserModule],
  7. declarations: [AppComponent],
  8. providers: [UserService],
  9. bootstrap: [AppComponent]
  10. })
  11. export class AppModule {}

注入服务
服务注册好之后,就可以在组件中使用依赖注入来获取服务实例了。可以通过构造函数注入服务,也可以通过属性注入服务。

  1. import { Component } from '@angular/core';
  2. import { UserService } from './user.service';
  3. @Component({
  4. selector: 'app-root',
  5. template: `
  6. <h1>Users</h1>
  7. <ul>
  8. <li *ngFor="let user of users">{{user}}</li>
  9. </ul>
  10. <input [(ngModel)]="newUser">
  11. <button (click)="addUser()">Add User</button>
  12. `
  13. })
  14. export class AppComponent {
  15. users: string[];
  16. newUser = '';
  17. constructor(private userService: UserService) {}
  18. ngOnInit() {
  19. this.users = this.userService.getUsers();
  20. }
  21. addUser() {
  22. this.userService.addUser(this.newUser);
  23. this.newUser = '';
  24. this.users = this.userService.getUsers();
  25. }
  26. }

在上面的例子中,通过构造函数注入了UserService服务,并在ngOnInit生命周期钩子函数中获取了服务中的用户列表。同时,也通过属性绑定的方式,将新用户的值双向绑定到输入框中,当用户点击添加按钮时,就可以通过服务将新用户添加到列表中了。


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