建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
這篇文章主要介紹Angular中依賴(lài)注入的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)公司專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)、做網(wǎng)站、洋縣網(wǎng)絡(luò)推廣、成都微信小程序、洋縣網(wǎng)絡(luò)營(yíng)銷(xiāo)、洋縣企業(yè)策劃、洋縣品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供洋縣建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
依賴(lài)注入：設(shè)計(jì)模式
依賴(lài)：程序里需要的某種類(lèi)型的對(duì)象。
依賴(lài)注入框架：工程化的框架
注入器Injector：用它的API創(chuàng)建依賴(lài)的實(shí)例
Provider:怎樣創(chuàng)建？（構(gòu)造函數(shù),工程函數(shù)）
Object：組件，模塊需要的依賴(lài)
依賴(lài)性注入進(jìn)階=>Angular中依賴(lài)注入框架提供父子層次注入型依賴(lài)
一、依賴(lài)注入
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)造依賴(lài)對(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)單的依賴(lài)注入。
問(wèn)題是在main里還是需要知道細(xì)節(jié)。
思路：一級(jí)一級(jí)往上推，一直推到入口函數(shù)，入口函數(shù)來(lái)處理所有對(duì)象的構(gòu)造。構(gòu)造出來(lái)后提供給所有依賴(lài)的子模塊的子類(lèi)。
問(wèn)題：入口函數(shù)很難維護(hù)。所以需要一個(gè)依賴(lài)注入框架幫助完成。
二、Angular的依賴(lài)注入框架
從v5開(kāi)始，因?yàn)樗俣嚷?，引入大量代碼已棄用，改為Injector.create。
ReflectiveInjector：用于實(shí)例化對(duì)象和解析依賴(lài)關(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ù)，可以拿到所有依賴(lài)池子里的東西。
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)有找到依賴(lài)的時(shí)候會(huì)去父注入器中找。
以上是“Angular中依賴(lài)注入的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：Angular中依賴(lài)注入的示例分析
文章地址：http://www.dlmjj.cn/article/joihge.html
