建站
咨詢
售后
建站咨詢
新聞中心
Angular 中的依賴注入
依賴項是指某個類執(zhí)行其功能所需的服務或對象。依賴項注入（DI）是一種設計模式，在這種設計模式中，類會從外部源請求依賴項而不是創(chuàng)建它們。
創(chuàng)新互聯(lián)公司基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據(jù)中心構建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務器托管報價，主機托管價格性價比高，為金融證券行業(yè)成都西信服務器托管，ai人工智能服務器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。
Angular 的 DI 框架會在實例化某個類時為其提供依賴?？梢允褂?nbsp;Angular DI 來提高應用程序的靈活性和模塊化程度。
包含本指南中代碼片段的可工作示例，請參見現(xiàn)場演練 / 下載范例。
創(chuàng)建可注入服務
要想在 ?src/app/heroes? 目錄下生成一個新的 ?HeroService ?類，請使用下列 Angular CLI 命令。
ng generate service heroes/hero下列命令會創(chuàng)建默認的 ?HeroService?。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class HeroService {
constructor() { }
}?@Injectable()? 裝飾器會指定 Angular 可以在 DI 體系中使用此類。元數(shù)據(jù) ?providedIn: 'root'? 表示 ?HeroService ?在整個應用程序中都是可見的。
接下來，要獲取英雄的模擬數(shù)據(jù)，請?zhí)砑右粋€ ?getHeroes()? 方法，該方法會從 ?mock.heroes.ts? 中返回英雄。
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
// declares that this service should be created
// by the root application injector.
providedIn: 'root',
})
export class HeroService {
getHeroes() { return HEROES; }
}為了清晰和可維護性，建議你在單獨的文件中定義組件和服務。
如果你確實要將組件和服務合并在同一個文件中，則必須先定義服務，再定義組件，這一點很重要。如果在服務之前定義組件，Angular 將返回運行時的空引用錯誤。
注入服務
注入某些服務會使它們對組件可見。
要將依賴項注入組件的 ?constructor()? 中，請?zhí)峁┚哂写艘蕾図楊愋偷臉嬙旌瘮?shù)參數(shù)。下面的示例在 ?HeroListComponent ?的構造函數(shù)中指定了 ?HeroService?。?heroService ?的類型是 ?HeroService?。
constructor(heroService: HeroService)在其他服務中使用這些服務
當某個服務依賴于另一個服務時，請遵循與注入組件相同的模式。在這里，?HeroService ?要依靠 ?Logger ?服務來報告其活動。
首先，導入 ?Logger ?服務。接下來，通過在括號中指定 ?private logger: Logger?，來在 ?HeroService ?的 ?constructor()? 中注入 ?Logger ?服務。
當創(chuàng)建一個其 ?constructor() ?帶有參數(shù)的類時，請指定其類型和關于這些參數(shù)的元數(shù)據(jù)，以便 Angular 可以注入正確的服務。
在這里，?constructor()? 指定了 ?Logger ?的類型，并把 ?Logger ?的實例存儲在名叫 ?logger ?的私有字段中。
下列代碼具有 ?Logger ?服務和兩個版本的 ?HeroService?。?HeroService ?的第一個版本不依賴于 ?Logger ?服務。修改后的第二個版本依賴于 ?Logger ?服務。
- src/app/heroes/hero.service (v2)
import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
import { Logger } from '../logger.service';
@Injectable({
providedIn: 'root',
})
export class HeroService {
constructor(private logger: Logger) { }
getHeroes() {
this.logger.log('Getting heroes ...');
return HEROES;
}
}import { Injectable } from '@angular/core';
import { HEROES } from './mock-heroes';
@Injectable({
providedIn: 'root',
})
export class HeroService {
getHeroes() { return HEROES; }
}import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class Logger {
logs: string[] = []; // capture logs for testing
log(message: string) {
this.logs.push(message);
console.log(message);
}
}在這個例子中，?getHeroes()? 方法通過在獲取英雄時通過 ?Logger ?來記錄一條消息。
本文題目：創(chuàng)新互聯(lián)Angular教程：Angular依賴注入
轉載來源：http://m.fisionsoft.com.cn/article/dhhjeej.html
