Angular4 開發(fā)實戰(zhàn)：(2) 創(chuàng)建組件(Component)

組件(Component)也就是應(yīng)用中的視圖，是開發(fā)的主要部分。

要創(chuàng)建一個組件很簡單，比如我們創(chuàng)建一個card組件：

ng g component card

你會看到app文件夾里生成下面的四個文件(spec.ts是測試文件，可忽略，目前用不到)：

card.component.html    
card.component.scss    
card.component.ts    
card.component.spec.ts

這里我推薦使用Angular CLI腳手架，當(dāng)然你要是不覺得麻煩，也可以一個一個文件建。

主要看看app/card/card.component.ts：

import { Component, OnInit } from '@angular/core';   

@Component({   
  selector: 'app-card',   
  templateUrl: './card.component.html',   
  styleUrls: ['./card.component.scss']  
})  
export class CardComponent implements OnInit {   
  constructor() { }    
  ngOnInit() {}  
}

@Component()是一個裝飾器，唯一需要的參數(shù)是一個元數(shù)據(jù)對象。

參數(shù)說明：

• templateUrl：模板文件路徑
• selector：組件選擇器名稱，一般采取橫杠方式
• styleUrls：樣式文件路徑

當(dāng)然，還有兩個屬性：

• template：模板字符串
• styles：樣式數(shù)組，比如：styles: ['h1{font-size:20px;}']

當(dāng)要使用這個組件時，還需要在模塊中寫入(在使用ng創(chuàng)建時，已經(jīng)自動添加到app/app.module.ts中)：

...
import { CardComponent } from './card/card.component';   

@NgModule({   
  declarations: [   
    AppComponent,   
    CardComponent   
  ],   
  ...  
})  
export class AppModule { }

注：這里我們再創(chuàng)建一個demo-component組件，用來放置這一章的實例。 這樣就可以像普通的HTML元素一樣使用了，比如在app/demo/demo-component.component.html中直接使用：

<app-card></app-card>

你會看到頁面多了card works!

動態(tài)嵌入內(nèi)容

有些時候，我們需要動態(tài)內(nèi)容，比如在app/demo/demo-component.html中加入如下代碼：

<app-card>   
  <h5>卡頭</h5>   
  我是卡的內(nèi)容  
</app-card>

可是當(dāng)打開頁面時，發(fā)現(xiàn)只是多了一行"card works!"，那如何才能顯示呢？很簡單，只需如下：

// app/components/card/card.component.html   

<ng-content></ng-content>

上面的代碼表示將組件內(nèi)部的內(nèi)容插入指定位置。 ng-content還有一個特別的屬性，值可以是"element", #id", ".class", "[name=value]"等CSS選擇器，比如我們可以這樣：

// card.component.html   

<ng-content select="h5"></ng-content>

上面代碼表示是將組件模板中包含h5標(biāo)簽的內(nèi)容添加到指定位置。

注意：如果有多個，會同時添加到指定位置。 如發(fā)現(xiàn)任何問題或有好的建議，歡迎在下方評論留言。