Angular2入門系列教程3 多個元件，主從關係

好了，前面簡單介紹了angular2的基本開發，並且寫了乙個非常簡單的元件，這篇文章我們將要學會編寫多個元件並且有主從關係

現在，假設我們要做乙個部落格，部落格的的文章具有主從關係，文章和文章詳情;現在，我們新建乙個article的資料夾和其元件的基本架構（順便說一下，我使用的是vs code 有個angular2 fiels的外掛程式，可以直接建立）

效果如下

我們需要顯示部落格，那就要建立乙個blogdata的資料**，這裡為了方便我們直接採用本地變數的模式來做；為了保證功能單一性原則，我們新建乙個data的資料夾，在裡面建立blog類

export class blog
export let blogs:blog=[,,
,,,]

然後在我們的article元件中匯入它

import  from '@angular/core';
import from '../data/blog';
@component()
export class articlecomponent 
}

由於article是html自帶的標籤，我們使用ngarticle作為選擇器

然後，我們開始編寫我們的元件模板 article.component.html

接下來是article.component.css

.articlelist

.articlelist li

.articlelist li > a

.articlelist li > span

.articlelist li > a:hover

.articlelist li:hover

然後在命令列中進入專案根目錄，使用ng serve命令執行，然後我們就得到了乙個錯誤

錯誤顯示我們的ngarticle是乙個未知的元件，未知怎麼辦，註冊嘛,所有的angular元件都要註冊（宣告）之後才能使用，具體方法如下

到此，效果如下

然後我們需要乙個顯示明細的東西，我們來做個顯示明細編輯吧

新建乙個article-detail元件，和上邊一樣，資料夾

articledetail.component.ts

import  from '@angular/core';
import from '../data/blog';
@component()
export class articledetailcomponent implements oninit 
}

這裡我們注意到多了乙個@input()裝飾器，這個是用來接受元件輸入的，待會兒我們修改article.component.html的時候你就知道是幹什麼的了

articledetail.component.html

id
} title

這裡用了*ngif 值為blog,表示如果blog有值，為真，那麼就顯示內容，否則不顯示

我們注意到這裡又多了乙個[(ngmodel)],簡單就理解為input一類標籤的值繫結，雙向的哦

articledetail.component.css

.articledetail

h2.row

.row>span

.myinput

然後是修改剛才的article元件

article.component.ts

import  from '@angular/core';
import from '../data/blog';
@component()
export class articlecomponent 
selectblog(blog:blog)
}

然後是article.component.html

我們看到article.component.ts中新增了乙個屬性selectedblog，多了乙個事件 selectblog;這個事件通過（click）="selectblog(blog)"繫結到了li標籤的點選事件上，沒錯，angular的點選事件就是這樣麼繫結的，然後我們在下方看到了我們的article-detail 元件的標籤，裡面有個 [blog]="selectedblog",結合到剛才detail元件的@input() blog:blog 屬性，我們就明白了，input故名思議就是輸入，可以接收父元件的引數;

這裡簡單聊一聊[blog]類似的傳值，[x]會將值繫結到元件或者單個標籤的prototype（非attr）上，比如乙個input標籤有value 的prototy，我們也可以使用這樣的繫結，你可以在article-detail元件中的input試一試，而這種繫結是單向的。由此，我們聯想到剛才的[(ngmodel)],好吧，其實[()]語法相當於兩個語法，乙個是[value]值繫結。乙個是（input）事件的繫結;可以理解為

[ngmodel]="blog.title"+(ngmodelchange)="blog.title=$event";這兩個事件更原始的模樣是[value]="blog.title"+(input)="blog.title=$event.target.value",不過我們不用去關心angular2幫我們做的這些事情,知道怎麼用就行了吧

行文到此，我們該來看下效果了

更新ing。。。

專案已經放到了gitbub上，位址

本文章的提交 /tree/a877676846b22b6dbe5430d02b01d25fb5463c61

Angular2入門系列教程3 多個元件，主從關係

Angular2入門學習

Angular2入門 3 模板的邏輯控制

angular2 發布angular2模組，服務

Angular2入門系列教程3 多個元件，主從關係

Angular2入門學習

Angular2入門 3 模板的邏輯控制

angular2 發布angular2模組，服務

相關推薦