建立第乙個Angular應用程式元件，第2部分

該homecomponent我們在前面的教程和建立allcountriescomponent，我們將在本節建立非常相似。唯一的區別是，我們無需對countries陣列進行排序和切片以僅獲得前三個國家，而是將其一次列出。在控制台內部，移至您的專案目錄並執行以下命令：

ng generate component all-countries

這是all-countries.component.ts檔案的**：

import  from '@angular/core';
import from '../country';
import from '../country.service';
@component()
export class allcountriescomponent implements oninit 
ngoninit() 
getcountries(): void 
}

在類的定義，我們建立了乙個countries接受的乙個陣列屬性country物件作為其值。使用依賴注入將countryservice類新增到元件。我們在初始化時呼叫此類的getcountries()方法。getcountries()方法本身依賴於countryservice類中的getcountries()，該類返回country物件的陣列。

all-countries.component.html檔案將儲存我們元件的模板。


}capital 
(})

就像模板homecomponent，我們使用*ngfor列出全部由獲得國家getcountries()方法，並儲存在countries的財產allcountriescomponent類。我們使用此元件來使用capital屬性顯示不同國家的capital。在下一教程中，您將了解與a標籤一起使用的routerlink指令。

使用css與home.component.css檔案css相同。唯一的區別是我們將每個國家/地區塊的背景色更改為綠色。這是完整css**：

a *,*:after, *:before body h2, h3, h4, p .country-block p .country-block h4 h4 .container .country-unit br .country-block

.country-block:hover

countrydetailcomponent將是angular應用程式的第三個也是最後乙個元件。每當使用者在任內列出的任何國家的名稱，單擊homecomponent或allcountriescomponent，他們將被帶到countrydetailcomponent。

返回控制台並執行以下命令：

ng generate component country-detail

這是country-detail.component.ts檔案的**：

import  from '@angular/core';
import from '@angular/router';
import from '@angular/common';
import from '../country';
import from '../country.service';
@component()
export class countrydetailcomponent implements oninit 
ngoninit(): void 
getcountry(): void 
goback(): void 
}

在類定義內，我們建立乙個名為country的屬性，該屬性接受country物件作為其值。不像homecomponent和allcountriescomponent，該countrydetailcomponent類有一次只顯示乙個國家的細節。

這是country-detail.component.html檔案的**：

capital: }
area: } km
2population: }
gdp: } usd
currency: }
go back

以下是位於country-detail.component.css檔案中css：

.container h2, p p p span label

button

完成本教程後，我們在第乙個angular應用程式中新增了兩個元件。該allcountriescomponent是非常相似的homecomponent，因為它們都呈現了儲存在國家名單countries陣列。countrydetailcomponent有所不同，因為它根據其名稱從countries陣列中提取了有關乙個國家的資訊。

建立了三個不同的元件之後，您現在應該對.ts，.html和.css檔案之間的互動具有基本的了解，以建立功能全面的元件。

在本系列的下乙個教程中，您將學習如何一起使用所有這些元件並進行一些最終更改，以便應用程式可以正常執行。

建立第乙個Angular應用程式元件，第2部分

Django建立第乙個應用

Django建立第乙個應用

用Pycharm建立第乙個Django程式（二）

建立第乙個Angular應用程式 元件，第2部分

Django建立第乙個應用

Django建立第乙個應用

用Pycharm建立第乙個Django程式（二）

相關推薦

建立第乙個Angular應用程式元件，第2部分