Angular技术教程：深入理解依赖注入与案例讲解

Angular 技术教程：深入理解依赖注入与案例讲解

一、引言

Angular是一个由Google维护的开源前端框架，广泛用于构建现代Web应用。依赖注入（Dependency Injection, DI）是Angular中的一个核心概念，它简化了服务的创建和管理，提高了代码的可测试性和可维护性。

二、依赖注入的基本概念

依赖注入是一种设计模式，用于实现控制反转（Inversion of Control, IoC）。在Angular中，依赖注入允许我们创建和管理服务的实例，而无需在组件类中显式地创建这些实例。

三、如何在Angular中使用依赖注入

1. **创建服务**：首先，我们需要创建一个服务类，并使用@Injectable()装饰器来标记它。


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

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData() {
    return ['data1', 'data2', 'data3'];
  }
}

2. **在组件中注入服务**：然后，我们可以在组件的构造函数中通过依赖注入的方式获取服务的实例。


import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
  data: string[];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}

四、案例讲解：使用依赖注入实现父子组件通信

在这个案例中，我们将展示如何使用依赖注入来实现父子组件之间的通信。

1. **创建父组件**：首先，我们创建一个父组件，并在其中注入一个服务。


import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  message: string;

  constructor(private dataService: DataService) {
    this.message = 'Hello from Parent Component';
    // 使用服务来存储或传递数据
    dataService.setMessage(this.message);
  }
}

2. **创建子组件**：然后，我们创建一个子组件，并在其中注入相同的服务。


import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
})
export class ChildComponent implements OnInit {
  message: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 从服务中获取数据
    this.message = this.dataService.getMessage();
  }
}

3. **模板文件**：最后，我们编写父组件和子组件的模板文件。

父组件模板（parent.component.html）：