[轉]【Angular4】基礎（二）：建立組件 Component

本文轉自：http://www.javashuo.com/article/p-oqtnivrg-nn.html

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/u013451157/article/details/79445138

建立一個組件很簡單，好比咱們建立一個 card 組件：

ng g c card

• 1

這裏我使用的是 Angular CLI 腳手架，固然你要是不以爲麻煩，也能夠一個個文件建。

不過！要提醒一點，當使用 ng 建立時，會將建立的組件、服務這些自動添加到 app/app.module.ts 中，若是你是手動建立的話必定要記得在模塊中寫入你建立的。

如今來看下 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() {} }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

@Component() 是一個裝飾器，惟一須要的參數是一個元數據對象。

參數說明：

• selector：組件選擇器名稱，通常採起橫槓方式
• templateUrl：模板文件路徑

• styleUrls：樣式文件路徑 
  固然，若是你使用內聯模板和內聯樣式的話，能夠將 templateUrl 換爲 template， styleUrls 換成 styles

• template：模板字符串

• styles：樣式數組

export class CardComponent implements OnInit { } 是一個控制器

---

如今咱們動手作一個小 demo

建立一個 demo-component 組件，用來放置實例

好比在 app/demo/demo-component.component.html 中直接使用：

<app-card></app-card>

• 1

你可能會問爲何是 app-card，以前建立的不是 card 組件麼？

這裏須要看你的配置文件 .angular-cli.json，通常默認添加 app 的前綴 
 
因此你建立的 card 組件的 selector 就變成了 app-card。 
 
這時你啓動項目後會發現頁面中顯示 card works!（當你用 ng 建立組件後都會自動在 template 中添加 「組件名 works!」）

若沒有顯示這預期的效果，就去檢查下 app/app.component.html 中是否爲

<app-demo-component></app-demo-component>

• 1

這裏暫停下來梳理下思路，

index.html 爲整個應用的入口文件 
 
你會發現 body 中嵌入了 <app-root></app-root>

而這個組件也就是根組件 app.component.ts 
 
爲了方便管理咱們就將全部的實例都放置在 app.component.html 中，這裏只有一個實例

<app-demo-component></app-demo-component>

• 1

在 demo-component.html 中實例化的是一個 card 組件，內容爲：

<app-card></app-card>

• 1

好了！想着思路應該也梳理清楚了，那麼思考下如何 動態嵌入內容 呢？

在 app/demo/demo-component.html 中修改以下：

<app-card> <h3>卡頭</h3> 我是卡的內容 </app-card>

• 1
• 2
• 3
• 4

當打開頁面時發現沒有出現動態嵌入的內容？別慌~

// app/card/card.component.html <ng-content></ng-content>

• 1
• 2
• 3

上面的代碼表示將組件內部的內容插入指定位置，ng-content 還有一個特別的屬性，值能夠是」element」, #id」, 「.class」, 「[name=value]」等CSS選擇器，好比咱們能夠這樣：

// card.component.html <ng-content selector="h3"></ng-content>

• 1
• 2
• 3

上面的代碼意思是將包含h3的內容插入指定位置。

---

模板ts文件說明

import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; import {FormsModule} from '@angular/forms'; import {HttpModule} from '@angular/http'; @NgModule({ declarations: [ // 聲明在該模塊中有哪些東西（組件、指令、管道） AppComponent ], imports: [ // 聲明該模塊須要正常運轉時須要用到哪些模塊(即：該模塊依賴哪些其它模塊) BrowserModule, FormsModule, HttpModule ], providers: [], // 聲明模塊中的服務 bootstrap: [AppComponent] // 聲明該模塊的主組件 }) export class AppModule { }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

---

關於 moduleId（Angular2 與 Angular4區別）

上述建立的組件是用 Angular4，默認配置了 moduleId。

這裏主要說下 Angular2 中的 moduleId。

沒有module.id：

@Component({
    selector: 'my-component', templateUrl: 'app/components/my.component.html', <- Starts from base path styleUrls: ['app/components/my.component.css'] <- Starts from base path })

• 1
• 2
• 3
• 4
• 5
• 6

使用module.id：

tsconfig.json：
{
    "compilerOptions": { "module": "commonjs", <- need to change this if you want to use module.id property ... @Component({ moduleId: module.id, selector: 'my-component', templateUrl: 'my.component.html', <- relative to the components current path styleUrls: ['my.component.css'] <- relative to the components current path })