欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Angular依賴注入

 更新時(shí)間：2021年05月24日 10:32:51   作者：starof  
依賴注入(DI -- Dependency Injection)是一種重要的應(yīng)用設(shè)計(jì)模式。Angular里面也有自己的DI框架，在設(shè)計(jì)應(yīng)用時(shí)經(jīng)常會(huì)用到它，它可以我們的開(kāi)發(fā)效率和模塊化程度。 Angular系統(tǒng)中通過(guò)在類(lèi)上添加@Injectable裝飾器來(lái)告訴系統(tǒng)這個(gè)類(lèi)(服務(wù))是可注入的。

概述

依賴注入：設(shè)計(jì)模式

依賴：程序里需要的某種類(lèi)型的對(duì)象。

依賴注入框架：工程化的框架

注入器Injector：用它的API創(chuàng)建依賴的實(shí)例

Provider:怎樣創(chuàng)建？（構(gòu)造函數(shù),工程函數(shù)）

Object：組件，模塊需要的依賴

依賴性注入進(jìn)階=>Angular中依賴注入框架提供父子層次注入型依賴

一、依賴注入

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  constructor(provice, city, district, street) {}
}

class Person {
  id: Id;
  address: Address;
  constructor() {
    this.id = Id.getInstance("idcard");
    this.address = new Address("北京", "背景", "朝陽(yáng)區(qū)", "xx街道");
  }
}

問(wèn)題：Person需要清楚的知道Address和Id的實(shí)現(xiàn)細(xì)節(jié)。

ID和Address重構(gòu)后，Person需要知道怎么重構(gòu)。

項(xiàng)目規(guī)模擴(kuò)大后，集成容易出問(wèn)題。

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  constructor(provice, city, district, street) {}
}

class Person {
  id: Id;
  address: Address;
  constructor(id: Id, address: Address) {
    this.id = id;
    this.address = address;
  }
}

main(){
  //把構(gòu)造依賴對(duì)象，推到上一級(jí)，推調(diào)用的地方
  const id = Id.getInstance("idcard");
  const address = new Address("北京", "背景", "朝陽(yáng)區(qū)", "xx街道");
  const person = new Person(id , address);
}

Person已經(jīng)不知道Id和Address的細(xì)節(jié)了。

這是最簡(jiǎn)單的依賴注入。

問(wèn)題是在main里還是需要知道細(xì)節(jié)。

思路：一級(jí)一級(jí)往上推，一直推到入口函數(shù)，入口函數(shù)來(lái)處理所有對(duì)象的構(gòu)造。構(gòu)造出來(lái)后提供給所有依賴的子模塊的子類(lèi)。

問(wèn)題：入口函數(shù)很難維護(hù)。所以需要一個(gè)依賴注入框架幫助完成。

二、Angular的依賴注入框架

從v5開(kāi)始，因?yàn)樗俣嚷?，引入大量代碼已棄用，改為Injector.create。

ReflectiveInjector ：用于實(shí)例化對(duì)象和解析依賴關(guān)系。import { Component ,ReflectiveInjector } from "@angular/core";resolveAndCreate接收一個(gè)provider數(shù)組，provider告訴injector應(yīng)該怎樣去構(gòu)造這個(gè)對(duì)象。

constructor() {
    //接收一個(gè)provider數(shù)組
    const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide: Person, useClass:Person
      },
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝陽(yáng)區(qū)", "xx街道xx號(hào)");
          }else{
            return new Address("西藏", "拉薩", "xx區(qū)", "xx街道xx號(hào)");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance('idcard');
        }
      }
    ]);
  }

Injector：

injector相當(dāng)于main函數(shù)，可以拿到所有依賴池子里的東西。

import { Component ,ReflectiveInjector, Inject} from "@angular/core";
import { OverlayContainer } from "@angular/cdk/overlay";
import { Identifiers } from "@angular/compiler";
import { stagger } from "@angular/animations";
import { environment } from 'src/environments/environment';

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

  constructor(private oc: OverlayContainer) {
    //接收一個(gè)provider數(shù)組
    const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide: Person, useClass:Person
      },
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝陽(yáng)區(qū)", "xx街道xx號(hào)");
          }else{
            return new Address("西藏", "拉薩", "xx區(qū)", "xx街道xx號(hào)");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance('idcard');
        }
      }
    ]);
    const person = injector.get(Person);
    console.log(JSON.stringify(person));
  }

}

class Id {
  static getInstance(type: string): Id {
    return new Id();
  }
}

class Address {
  provice:string;
  city:string;
  district:string;
  street:string;
  constructor(provice, city, district, street) {
    this.provice=provice;
    this.city=city;
    this.district=district;
    this.street=street;
  }
}

class Person {
  id: Id;
  address: Address;
  constructor(@Inject(Id) id, @Inject(Address )address) {
    this.id = id;
    this.address = address;
  }
}

可以看到控制臺(tái)打印出person信息。

簡(jiǎn)寫(xiě)：

 // {
      //   provide: Person, useClass:Person
      // },
      Person, //簡(jiǎn)寫(xiě)為Person

在Angular框架中，框架做了很多事，在provider數(shù)組中注冊(cè)的東西會(huì)自動(dòng)注冊(cè)到池子中。

@NgModule({
  imports: [HttpClientModule, SharedModule, AppRoutingModule, BrowserAnimationsModule],
  declarations: [components],
  exports: [components, AppRoutingModule, BrowserAnimationsModule],
  providers:[
    {provide:'BASE_CONFIG',useValue:'http://localhost:3000'}
  ]
})
  constructor( @Inject('BASE_CONFIG') config) {
    console.log(config);  //控制臺(tái)打印出http://localhost:3000
  }

Angular默認(rèn)都是單例，如果想要每次注入都是一個(gè)新的實(shí)例。有兩種方法。

一，return的時(shí)候return一個(gè)方法而不是對(duì)象。

{
    provide: Address, useFactory: ()=>{
        return ()=>{
            if(environment.production){
                return new Address("北京", "背景", "朝陽(yáng)區(qū)", "xx街道xx號(hào)");
            }else{
                return new Address("西藏", "拉薩", "xx區(qū)", "xx街道xx號(hào)");
            }
        }
    }
},

二、利用父子Injector。

constructor(private oc: OverlayContainer) {
    //接收一個(gè)provider數(shù)組
    const injector = ReflectiveInjector.resolveAndCreate([
      Person,
      {
        provide: Address, useFactory: ()=>{
          if(environment.production){
            return new Address("北京", "背景", "朝陽(yáng)區(qū)", "xx街道xx號(hào)");
          }else{
            return new Address("西藏", "拉薩", "xx區(qū)", "xx街道xx號(hào)");
          }
        }
      },
      {
        provide: Id, useFactory:()=>{
          return Id.getInstance('idcard');
        }
      }
    ]);

    const childInjector = injector.resolveAndCreateChild([Person]);

    const person = injector.get(Person);
    console.log(JSON.stringify(person));
    const personFromChild = childInjector.get(Person);
    console.log(person===personFromChild);  //false
  }

子注入器當(dāng)中沒(méi)有找到依賴的時(shí)候會(huì)去父注入器中找

以上就是詳解Angular依賴注入的詳細(xì)內(nèi)容，更多關(guān)于Angular的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論