八、依赖注入

在Angular中，依赖注入（Dependency Injection，简称DI）是一种设计模式，用于将类所依赖的对象提供给该类，而不是在类内部自己创建。这样可以降低模块之间的耦合性、提高代码的可维护性和测试性。

一、全局注册

1. 定义服务：

• 1.1.1 创建一个服务类，在类上可以添加@Injectable装饰器。

  import { Injectable } from '@angular/core';
  
  @Injectable({
  
  })
  export class DataService {
   getData() {
     return ['Data1', 'Data2', 'Data3'];
   }
  }
  

• 1.1.2 然后在全局开始注册 app.modules

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

  import {UserListService} from './service/user.service';
  import { HelloServiceComponent } from './hello-service/hello-service.component';
  @NgModule({
    declarations: [

      HelloPipeComponent,
      HelloServiceComponent,

    ],
    imports: [
      BrowserModule,

      CommonModule,
      ReactiveFormsModule
    ],
    providers: [UserListService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

• 1.2 简写写法 直接指定在全局组件

  import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root', // service自动在根注入器中提供
  })
  export class DataService {
    getData() {
      return ['Data1', 'Data2', 'Data3'];
    }
  }
  

  2. 在组件中注入服务：

  • 通过构造函数参数注入服务。

  import { Component } from '@angular/core';
  import { DataService } from './data.service';
  
  @Component({
    selector: 'app-example',
    template: '<div>{{data}}</div>',
  })
  export class ExampleComponent {
    data: string[];
  
    constructor(private dataService: DataService) {
      this.data = dataService.getData();
    }
  }
  

二、局部注册

1. 定义一个服务类

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

    @Injectable({
  
    })
    export class DataService {
      getData() {
        return ['Data1', 'Data2', 'Data3'];
      }
    }

2. 在组件中使用

import { Component, OnInit } from '@angular/core';
import {DataService} from '../service/user.service';
import { User } from '../service/user'
@Component({
  selector: 'app-hello-service',
  templateUrl: './hello-service.component.html',
  styleUrls: ['./hello-service.component.less'],
  providers: [UserListService]
})
export class HelloServiceComponent implements OnInit {
  users:User[] = [];
  constructor(private userListService: DataService) {
  this.users =  this.userListService.getUsers()
   }

  ngOnInit(): void {
  }

}