我們已經(jīng)在電腦上安裝好了angular6.0，并且也通過angular6.0創(chuàng)建了一個demo1的項(xiàng)目。接下來，我們就要針對這個demo1項(xiàng)目進(jìn)行相應(yīng)的開發(fā)。本章，我們來給項(xiàng)目新建幾個component組件。

創(chuàng)建一個自定義組件，其實(shí)很簡單，進(jìn)入命令行工具，再進(jìn)入到demo1目錄，輸入以下命令：

angular6.0教程

ng? g? component? home? ?創(chuàng)建一個名為home的組件。

創(chuàng)建完后，會自動在app目錄下生成1個home目錄，home目錄下會生成4個文件，如下圖：

上圖中，home.component.css是這個組件的css樣式文件，home.component.html是該組件的html文件，home.component.ts是該組件的JS文件。同時，home組件創(chuàng)建完成后，會自動在app.module.ts主模塊中導(dǎo)入這個home組件，如下圖：

在 Angular 中，是使用 Component 裝飾器來定義組件的元信息，如下圖：

selector:'app-home'：用于定義組件在HTML代碼中匹配的標(biāo)簽，這樣，我們可以在其它組件中通過來調(diào)用這個組件。

templateUrl:'./home.component.html'：定義組件內(nèi)嵌視圖。

styleUrls:['./home.component.css']：定義了組件css樣式文件。

export class HomeComponent implements OnInit {}：定義組件類。組件需要實(shí)現(xiàn)的功能，都在這個區(qū)域書寫。

組件創(chuàng)建好后，我們就可以給這個組件添加我們所需要的功能了。