學習目錄

前言

之前的一篇文章已經介紹了Angular 4 依賴注入的基礎知識，下面將介紹Angular 4依賴注入之組件服務注入的相關內容，分享出來供大家參考學習，下面來來看看詳細的介紹：

本系列教程的開發環境及開發語言：

基礎知識

如何創建 Angular 組件

在 Angular 中我們通過以下方式創建一個簡單的組件：

@Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> `})export class AppComponent { title: string = 'App Works';}

如何創建 Angular 服務

在 Angular 中我們通過以下方式創建一個簡單的服務：

export class DataService { getData() { return ['Angular', 'React', 'Vue']; }}

組件中注入服務

介紹完基礎知識，接下來我們來創建一個新的組件 - HeroComponent，它用來顯示英雄的信息，具體實現如下：

import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-hero', template: ` <ul> <li *ngFor="let hero of heros"> ID: {{hero.id}} - Name: {{hero.name}} </li> </ul> `})export class HeroComponent implements OnInit { heros: Array<{ id: number; name: string }>; ngOnInit() { this.heros = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' } ]; }}

在 HeroComponent 組件中，我們在 ngOnInit 鉤子中進行數據初始化，然后利用 ngFor 指令來顯示英雄列表的信息。創建完 HeroComponent 組件，我們要來驗證一下該組件的功能。

首先在 AppModule 中導入 HeroComponent 組件，具體如下：

import { HeroComponent } from './hero/hero.component';@NgModule({ declarations: [ AppComponent, HeroComponent ], ...})export class AppModule { }

然后更新一下 AppComponent 組件，具體如下：

import { Component } from '@angular/core';@Component({ selector: 'app-root', template: ` <app-hero></app-hero> `})export class AppComponent {}

如果不出意外的話，訪問 http://localhost:4200/ 頁面，您將看到如下信息：

ID: 11 - Name: Mr. NiceID: 12 - Name: NarcoID: 13 - Name: BombastoID: 14 - Name: CeleritasID: 15 - Name: Magneta