解构 Angular 的依赖注入：通过构建应用程序进行学习

作为 Angular 开发人员，掌握依赖注入 (DI) 的奥秘至关重要。DI 是一种强大的软件工程技术，可以创建模块化且易于维护的应用程序。在这篇文章中，我们将踏上一个旅程，通过构建一个实际的应用程序来深入了解 Angular 的 DI，揭开其强大的功能。

DI 在 Angular 中扮演着关键角色，它允许我们分离应用程序的组件并将其依赖关系声明为明确定义的属性。这带来了许多好处，包括代码可重用性提高、测试更容易、应用程序整体结构更清晰。

要开始我们的 DI 探索之旅，让我们着手构建一个简单的 Angular 应用。我们将创建一个 Todo 列表应用程序，展示如何使用 DI 来有效地管理组件之间的依赖关系。

首先，在终端中使用 Angular CLI 创建一个新的 Angular 应用程序：

ng new di-app

接下来，让我们创建两个组件：TodoListComponent 和 TodoItemComponent。TodoListComponent 将负责管理和显示 Todo 项列表，而 TodoItemComponent 将表示每个 Todo 项。

todo-list.component.html

<ul>
  <li *ngFor="let todo of todos">
    <todo-item [todo]="todo"></todo-item>
  </li>
</ul>

todo-list.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent implements OnInit {
  todos: string[] = ['Learn Angular', 'Build a Todo app', 'Master DI'];

  constructor() { }

  ngOnInit(): void {
  }
}

todo-item.component.html

<li>
  <input type="checkbox" [(ngModel)]="todo.completed">
  <label>{{ todo.title }}</label>
</li>

todo-item.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: ['./todo-item.component.css']
})
export class TodoItemComponent {
  @Input() todo: any;
}

现在，我们已经有了两个组件，让我们在AppComponent中使用 DI 来连接它们。

app.component.html

<todo-list></todo-list>

app.component.ts

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

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

在AppComponent中，我们没有明确指定TodoListComponent的依赖项。这是因为 Angular 会自动检测并注入TodoListComponent所需的依赖项，因为它在 HTML 模板中被使用了。这种隐式依赖注入让我们的代码更简洁、更容易维护。

通过这个简单的 Todo 应用程序，我们展示了 Angular 中 DI 的强大功能。DI 允许我们在应用程序组件之间建立明确的依赖关系，从而提高模块化、可维护性和可测试性。

结论

通过构建这个应用程序，我们亲身体验了 Angular 中 DI 的魔力。现在，我们了解到 DI 如何帮助我们创建更干净、更易于维护的应用程序。随着我们构建更复杂和雄心勃勃的应用程序，DI 将成为我们开发工具包中不可或缺的一部分。因此，让我们继续探索 DI 的可能性，掌握这种强大的技术，成为更出色的 Angular 开发人员！