本系列教程的開發環境及開發語言：
在 angular 中我們通過以下方式建立乙個簡單的元件：
@component()
}
export class dataservice
}
herocomponent，它用來顯示英雄的資訊，具體實現如下：
import from '@angular/core';
@component()
export class herocomponent implements oninit >;
ngoninit() ,,,
,];
}}
import from './hero/hero.component';
@ngmodule()
import from '@angular/core';如果不出意外的話，訪問http://localhost:4200/頁面，您將看到如下資訊：@component()
id: 11 - name: mr. nice
id: 12 - name: narco
id: 13 - name: bombasto
id: 14 - name: celeritas
id: 15 - name: magneta
herocomponent元件，我們的英雄列表資訊是固定的，在實際的開發場景中，一般需要從遠端伺服器獲取相應的資訊。但我們暫不考慮這個問題，假設另外乙個元件也需要利用同樣的英雄列表資訊，那我們要怎麼辦，難道直接上 "終極絕招" -copy && paste。當然這是 "終極絕招"，豈能隨便使用 (不怕被群毆的話，請自便哈)。
針對上面提到的問題，理想的方式是建立乙個heroservice服務，從而實現資料共享。說幹就幹，我們馬上來建立heroservice服務，具體如下：
export class heroservice > = [,,
,,
];getheros()
}
heroservice服務中，我們定義了乙個heros屬性和乙個getheros()方法：
建立完heroservice服務後，接下來我們來介紹如何在元件中使用heroservice服務。
元件中使用heroservice服務，主要分為三個步驟：
import from '../hero.service';@component()export class herocomponent implements oninit
}
import from '@angular/core';
import from '../hero.service';
@component()
export class herocomponent implements oninit
heros: array<>;
ngoninit()
}
providers: [heroservice]這一行，相信有一些讀者會有一些困惑，因為他們可能是按照下面的方式去配置heroservice服務。
@ngmodule()import from '../hero.service';
export class herocomponent implements oninit
}
@ngmodule()或@component()metadata 中我們只是配置provider的相關資訊，即告訴 angular di (依賴注入) 系統，如何建立根據配置的provider資訊，建立相應的依賴物件。而在herocomponent元件類中，我們通過構造注入的方式去告訴 angular di 系統，我們需要的依賴物件型別。 Angular4學習之依賴注入
在乙個專案中，元件和服務之間存在錯綜複雜的關係，為了最小程度的耦合，我們需要來管理組織這種關係，依賴注入就是管理這種關係的一種方式。在學習乙個概念之前，我們必須要知道我們為什麼要學習這個東西，這個東西究竟解決了什麼問題。就好比這裡講到的，依賴注入究竟解決了什麼問題。要解決這個問題，我們先來看看示例 ...
angular4學習記錄 依賴注入
是指程式執行過程中，如果需要呼叫另乙個物件協助時，無須在 中建立被呼叫者，而是依賴於外部的注入 在元件中的constructor中 constructor private productservice productservice 1.providers productservice 等價於 第二種...
深入理解Angular4中的依賴注入
在angular中使用依賴注入，可以幫助我們實現松耦合，可以說只有在元件中使用依賴注入才能真正的實現可重用的元件。如果我們有個服務product.service.ts，其中export了乙個productservice類，類中有乙個getproduct方法。如果不使用依賴注入，假設我們需要在prod...