本文介紹了Angular4學習筆記之實現綁定和分包，分享給大家，希望對大家有幫助
src目錄下的app/app.component.ts文件是一個標準的angular4組件的結構。
上面@component()括號內template屬性里用`(這個符號不是單引號，而是鍵盤1左邊、tab鍵上面的那個符號)包裹的是View，下面export的class部分是Controller。
希望實現的效果長這個樣子：
萬里長征第一步，先從修改View開始。
修改temlate里的HTML文件，改成下面的樣子：
<h1>Hello,World</h1><p>你好,gundam meister</p><span>海牛高達</span><div> <span>海牛高達</span> <span>NewType</span></div>
上面部分先充當項目簡介。
中間的span假裝是高達列表。
下面的div包裹的兩個span假裝是高達詳情。
刷新頁面，現在是這個樣子的： 
好吧我承認和效果圖比起來是挫了一點，但是現在先專注于功能實現。
需要實現的功能是：點擊高達列表，可以顯示高達詳情。
正常的情況下，當然不會用常量去渲染頁面。而如何溝通Controller和View就是Angular用Model干的事情：綁定。
綁定：你有我有全都有。
在同一個組件（component）內，在class（Controller）里定義的變量名，可以直接在template（View）里使用。
@Component({ selector: 'my-app', template: ` <h1>Hello,World</h1> <p>你好,gundam meister</p> <span>{{name}}</span> <div> <span>{{name}}</span> <span>{{type}}</span> </div> `})export class AppComponent { name = '海牛高達'; type = 'NewType';}刷新頁面，依然可以顯示：
當然，gundam其實是一個類，所以現在是model上場的時候了。
定義一個類 gundam：
class Gundam { name: string; type: string;}改寫name和type，讓他們成為屬性值而不是string常量:
gundam: Gundam = { name: '海牛', type: 'NewType'};typescript 的語法有點奇怪，定義某個變量是某種類型的寫法，是變量名在前變量類型在后。
改變temple里的引用：
<h1>Hello,World</h1><p>你好,gundam meister</p><span>{{gundam.name}}</span><div> <span>{{gundam.name}}</span> <span>{{gundam.type}}</span></div>刷新頁面:
繼續review代碼。
主頁展示的是一個gundam列表而不是某一個gundam，所以用一個gundam數組去冒充數據。
const gundams: Gundam[] = [ {name: '海牛高達', type: 'NewType'}, {name: '巴巴托斯', type: '近戰'}, {name: '力天使', type: '射擊'}];之前的angular提供了ng-repeat的標簽來循環列表，不過現在4.0以上的時代變成了標簽里一個特殊的修飾：*ngFor。
修改class里的代碼，定義一個變量gundams接受數組：
gundams = GUNDAMS;
修改template，用*ngFor循環解析數組，進行數據渲染：
<h1>Hello,World</h1><p>你好,gundam meister</p><div *ngFor="let gundam of gundams"> <span> {{gundam.name}} </span></div><div> <span>{{gundam.name}}</span> <span>{{gundam.type}}</span></div>刷新頁面:
列表已經根據數據來變化了(當然數據流還是有待商榷)，下面來修改使得詳情能根據點擊的列表項變化。
每一個html標簽都有事件(click hover 等等)，而angular也繼續調用了這些事件，只是寫法不太一樣。
<div *ngFor="let gundam of gundams" (click)="onSelected(gundam)">
解釋：點擊觸發class中的onSelected方法，同時把gundam作為參數傳遞進去。
因為View里用到的onSected函數來自controller，也就是class，所以需要補充：
selectedGundam: Gundam; // 定義一個selectedGudam作為接收詳情的變量onSelected (gundam: Gundam) : void{ this.selectedGundam = gundam; // 通過參數賦值}修改template中的html顯示：
<div> <span>{{selectedGundam.name}}</span> <span>{{selectedGundam.type}}</span></div>此時刷新頁面會報錯，因為雖然通過點擊div可以給selectedGudam賦值，但是當selectedGundam被初始化的時候是沒有值的。
有兩種解決辦法：
第一就是給selected設定初始值并設定初始被選擇的div。
另一種就是根據selected有沒有被初始化，決定顯示不顯示詳情的div。
因為angular提供了ngIf修飾，用第二種方法會比較省事一點。
<div *ngIf="selectedGundam"> <span>{{selectedGundam.name}}</span> <span>{{selectedGundam.type}}</span></div>刷新頁面
點擊巴巴托斯
總的來說，寫到這里業務邏輯已經完成了一半，甚至更多。因為本身項目就是一個點擊查看的單頁面應用，并不太復雜。但是所有的代碼都擠在一個類里，可讀性和擴展性都會變的很差。
所以是時候開始下一步了。
分包的精髓：拆。
import {Component} from '@angular/core';class Gundam { name: string; type: string;}const GUNDAMS: Gundam[] = [ {name: '海牛高達', type: 'NewType'}, {name: '巴巴托斯', type: '近戰'}, {name: '力天使', type: '射擊'}];@Component({ selector: 'my-app', template: ` <h1>Hello,World</h1> <p>你好,gundam meister</p> <div *ngFor="let gundam of gundams" (click)="onSelected(gundam)"> <span> {{gundam.name}} </span> </div> <div *ngIf="selectedGundam"> <span>{{selectedGundam.name}}</span> <span>{{selectedGundam.type}}</span> </div> `})export class AppComponent { gundam: Gundam = { name: '海牛', type: 'NewType' }; gundams = GUNDAMS; selectedGundam: Gundam; // 定義一個selectedGudam作為展示詳情的變量 onSelected (gundam: Gundam): void { this.selectedGundam = gundam; // 通過參數賦值 }}現在一個component擠了太多的東西，有數據、有常量、有template和class。如果項目很小的話(比如這個demo)還可以接受，但是一旦業務邏輯繁瑣起來就是totally disaster。
就算不介意坑別人，也別給隔了很久再去維護的自己找麻煩。
先把gundam這個class給摘出來，既然是model就好好呆在model的地方。
在src下新建model的包，新建一個gundam.ts的文件，把gundam class給ctrl+x過去。
在原本的地方導入：
import { Gundam } from '../../model/gundam';再把數組常量給挪走，理論上數據是需要從服務端取，但是我不寫服務端好多年，所以還是繼續使用假數據。
在src新建包service,新建data.ts文件,導入gundam類以后導出數組：
import { Gundam } from './../model/gundam';export const GUNDAMS: Gundam[] = [ {name: '海牛高達', type: 'NewType'}, {name: '巴巴托斯', type: '近戰'}, {name: '力天使', type: '射擊'}];在原位置引入使用：
import { GUNDAMS } from './../../service/data';ps:不要忘記在每個文件后空一行.雖然不空可以正常運行,但是會有錯誤提示.總的來說就是這么一個格式要求.
此時可以正常顯示，而app.component.ts里已經整潔多了。
但是還不夠，現在要把詳情分離出去。讓上帝的歸上帝，凱撒的歸凱撒。主頁就處理主頁數據，詳情就處理詳情數據。
換句話說，把首頁分成兩個頁面：首頁 + 詳情。
需要用到的就是route。
PS，有關綁定：
Angular的綁定很有意思，有雙向的也有單向的，有在class里聲明一個變量在template里使用的，也有在template里暴露一個class里的變量給外界賦值的。目前我見到的是如下三種寫法（指在view里）：
1）{{變量名}}，單項綁定，class中的值會顯示到view里。
2）[變量名]，單項綁定，一般后面還會跟個“=”，用來給class里的變量或者屬性賦值。
3）*ngModel=[(變量名)]，雙向綁定。有關雙向綁定其實我還是有點不理解，官方文檔上也只是在表單處理時應用。大體上說雙向綁定就是綁定值后在頁面修改值可以影響class內的值，而class內的值改變后view的值也會改變。
比如可以雙向綁定一個input，初始化的時候從服務端讀取一個值放進去，同時這個值是可以修改的。修改完畢class里的值也變了，可以直接提交而不用多寫拿value的步驟。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
