Angular--注入器和提供器

深碍√TFBOYSˉ_ 2021-09-27 08:02 431阅读 0赞

# 前言 #

说到注入器不得不说一下控制反转（IoC），控制反转是面向对象编程中的一种设计原则，是将原来在代码中判断选择的内容放到外部，在外部选择，从而降低计算机代码之间的耦合度，其有两种方式：依赖注入（DI）和依赖查找。在依赖注入和依赖查找的时候注入器和提供器就需要使用。接下来就简单介绍一下注入器和提供器。

# 内容 #

## 注入器 ##

1.当一个提供器提供在模块中时，他是对所有组件是可见的，所有组件都可以注入  
2.当一个提供器提供在组件中时，他只对声明它的组件及其子组件是可见的，其他组件不可以注入  
语法如下：

constructor(private productService: ProductService){…}

## 提供器 ##

1.当声明在模块中的提供器和声明在组件中的提供器具有相同的token时，声明在组件的提供器会覆盖声明在模块中的提供器  
2.服务提供器优先声明在模块中，只有服务必须在某个组件可见，对其他组件不可见时才声明在组件中  
语法如下：

providers:[ProductService]   
    providers:[{provide:ProductService,useClass:ProductService}]
    providers:[{provide:ProductService,useClass:AnotherProductService}]
    providers:[{provide:ProductService,useFactory:() =>{…}}]

### 提供器的调取方法1 ###

1.创建一个根目录Test

ng new Test

2.在根目录中创建子文件夹

ng g component product1

3.在根目录中创建子服务

ng g service/product

4.在子服务文件夹中找到`product.service.ts`，在里面添加新的类：

export class Product{ 
        constructor(
            public id:number,
            public title:string,
            public price:number,
            public desc:string
        ){
    }

然后在`export class ProductService { }`中添加

getProduct():Product{ returnnewProduct(0,"iphone7",5999,"最新款苹果手机");
    }

最终效果：

import{Injectable}from'@angular/core';      
    @Injectable()
    exportclass ProductService{ 
            constructor(){}
                    getProduct():Product{
                    returnnew Product(0,"iphone7",5999,"最新款苹果手机");
                    }
            }
    exportclass Product{ 
            constructor(
                  publicid:number,
                  publictitle:string,
                  publicprice:number,
                  publicdesc:string
              ){
        }
    }

5.寻找根app文件夹下的`app.module.ts`，打开，将providers：\[ \]中的“\[ \]”里面输入ProductService，同时将该值添加引用，（用提供器将其添加到模块中）

import{BrowserModule}from'@angular/platform-browser';
    import{NgModule}from'@angular/core';
    import{FormsModule}from'@angular/forms';
    import{HttpModule}from'@angular/http';
    import{AppComponent}from'./app.component';
    import{Product1Component}from'./product1/product1.component';
    import{ProductService}from'./shared/product.service';
    @NgModule({ 
            declarations:[
                   AppComponent,
                   Product1Component
            ],
            imports:[
                   BrowserModule,
                   FormsModule,
                   HttpModule
             ],
             providers:[ProductService],
             bootstrap:[AppComponent]
    })
    exportclassAppModule{}

6.在子文件夹product1中找到`product1.component.ts`  
首先需要接收模块中生成的数据，在`export class Product1Component implements OnInit{ }`中建立：

product：Product；

然后在构造函数中添加依赖注入：`private productService：ProductService`，声明在productService中需要ProductService这个服务  
最后在方法ngOnInit中添加`this.product = this.productService.getProduct()`  
最终效果:

import{Component,OnInit}from'@angular/core';
    import{Product,ProductService}from'../shared/product.service';
    @Component({
            selector:'app-product1',
            templateUrl:'./product1.component.html',
            styleUrls:['./product1.component.css']
    })
    exportclass Product1Component implementsOnInit{ 
            product:Product;
            constructor(private productService:ProductService){}
            ngOnInit(){
                   this.product=this.productService.getProduct();
            }
    }

7.添加模版，在product1的html中添加如下内容来调取商品信息；

<div> <h1>商品详情</h1> <h2>名称：{ { product.title}}</h2> <h2>价格：{ { product.price}}</h2> <h2>描述：{ { product.desc}}</h2> </div>

8.添加主模版的内容，在app.component.html中添加如下内容

<div>
        <div>
              <h1>基本的依赖注入样例</h1>
        </div>
        <div>
               <app-product1></app-product1>
        </div>
    </div>

9.运行结果：  
![这里写图片描述][70]

### 提供器调取方法2 ###

1.创建新的子文件

ng g component product2

2.创建新的子服务，放于同一个文件夹中

ng g service shared/anotherProduct

3.在another-product.service.ts中添加如下代码：

exportclass AnotherProductService implements ProductService{ getProduct():Product{ return new Product(1,"iphoneX",9999,"有刘海的苹果手机"); }
        constructor(){} }

最终效果：

import{Injectable}from'@angular/core';
    import{Product,ProductService}from'./product.service';
    @Injectable()
    exportclass AnotherProductService implementsProductService{ getProduct():Product{ returnnew Product(1,"iphoneX",9999,"有刘海的苹果手机"); }
         constructor(){} }

4.在product2文件夹的product.component.ts中添加如product1中的代码

exportclass Product1Component implements OnInit{ 
        product:Product;
        constructor(private productService:ProductService){}
        ngOnInit(){
            this.product=this.productService.getProduct();
        }
    }

同时在`@Component`中添加

providers:[{
        provide:ProductService,useClass:AnotherProductService
    }]

最终效果：

import{Component,OnInit}from'@angular/core';
    import{Product,ProductService}from'../shared/product.service';
    import{AnotherProductService}from'../shared/another-product.service';
    @Component({
          selector:'app-product2',
          templateUrl:'./product2.component.html',
          styleUrls:['./product2.component.css'],
          providers:[{
                        provide:ProductService,useClass:AnotherProductService
           }]
    })
    export class Product2Component implementsOnInit{     
    product:Product;    
    constructor(privateproductService:ProductService){}
           ngOnInit(){
                  this.product=this.productService.getProduct();
           }
    }

5.在product2中html文件添加内容，内容和product1中的html一样

<div> <h1>商品详情</h1> <h2>名称：{ { product.title}}</h2> <h2>价格：{ { product.price}}</h2> <h2>描述：{ { product.desc}}</h2> </div>

6.修改app下面的html文件中的内容，添加`<app-product2></app-product2>`  
最终效果：

<div>
         <div>
               <h1>基本的依赖注入样例</h1>
          </div>
          <div>
               <app-product1></app-product1>
               <app-product2></app-product2>
           </div>
    </div>

7.运行结果：  
![这里写图片描述][70 1]

# 总结 #

提供器调取方法2才是正真用到了依赖注入，所以精华部分是方法2.不过方法1是基础。

# end #

谢谢您的阅读！

[70]: /images/20210923/2264747fafcc41568958bff11b55f15b.png
[70 1]: /images/20210923/562c8047fe914e1883dd9892ba13837e.png