本文介紹了Angular4學習筆記之實現(xiàn)綁定和分包，分享給大家，希望對大家有幫助

src目錄下的app/app.component.ts文件是一個標準的angular4組件的結(jié)構(gòu)。

上面@component()括號內(nèi)template屬性里用`(這個符號不是單引號，而是鍵盤1左邊、tab鍵上面的那個符號)包裹的是View，下面export的class部分是Controller。

希望實現(xiàn)的效果長這個樣子：

萬里長征第一步，先從修改View開始。

修改temlate里的HTML文件，改成下面的樣子：

<h1>Hello,World</h1>
<p>你好,gundam meister</p>
<span>海牛高達</span>
<div>
  <span>海牛高達</span>
  <span>NewType</span>
</div>

上面部分先充當項目簡介。

中間的span假裝是高達列表。

下面的div包裹的兩個span假裝是高達詳情。

刷新頁面，現(xiàn)在是這個樣子的：

好吧我承認和效果圖比起來是挫了一點，但是現(xiàn)在先專注于功能實現(xiàn)。

需要實現(xiàn)的功能是：點擊高達列表，可以顯示高達詳情。

正常的情況下，當然不會用常量去渲染頁面。而如何溝通Controller和View就是Angular用Model干的事情：綁定。

綁定：你有我有全都有。

在同一個組件（component）內(nèi)，在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其實是一個類，所以現(xiàn)在是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>

刷新頁面:

繼續(xù)review代碼。

主頁展示的是一個gundam列表而不是某一個gundam，所以用一個gundam數(shù)組去冒充數(shù)據(jù)。

const gundams: Gundam[] = [
  {name: '海牛高達', type: 'NewType'},
  {name: '巴巴托斯', type: '近戰(zhàn)'},
  {name: '力天使', type: '射擊'}
];

之前的angular提供了ng-repeat的標簽來循環(huán)列表，不過現(xiàn)在4.0以上的時代變成了標簽里一個特殊的修飾：*ngFor。

修改class里的代碼，定義一個變量gundams接受數(shù)組：

gundams = GUNDAMS;

修改template，用*ngFor循環(huán)解析數(shù)組，進行數(shù)據(jù)渲染：

<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>

刷新頁面:

列表已經(jīng)根據(jù)數(shù)據(jù)來變化了(當然數(shù)據(jù)流還是有待商榷)，下面來修改使得詳情能根據(jù)點擊的列表項變化。

每一個html標簽都有事件(click hover 等等)，而angular也繼續(xù)調(diào)用了這些事件，只是寫法不太一樣。

<div *ngFor="let gundam of gundams" (click)="onSelected(gundam)">

解釋：點擊觸發(fā)class中的onSelected方法，同時把gundam作為參數(shù)傳遞進去。

因為View里用到的onSected函數(shù)來自controller，也就是class，所以需要補充：

selectedGundam: Gundam; // 定義一個selectedGudam作為接收詳情的變量
onSelected (gundam: Gundam) : void{
  this.selectedGundam = gundam; // 通過參數(shù)賦值
}

修改template中的html顯示：

<div>
  <span>{{selectedGundam.name}}</span>
  <span>{{selectedGundam.type}}</span>
</div>

此時刷新頁面會報錯，因為雖然通過點擊div可以給selectedGudam賦值，但是當selectedGundam被初始化的時候是沒有值的。

有兩種解決辦法：

第一就是給selected設定初始值并設定初始被選擇的div。

另一種就是根據(jù)selected有沒有被初始化，決定顯示不顯示詳情的div。

因為angular提供了ngIf修飾，用第二種方法會比較省事一點。

<div *ngIf="selectedGundam">
  <span>{{selectedGundam.name}}</span>
  <span>{{selectedGundam.type}}</span>
</div>

刷新頁面

點擊巴巴托斯

總的來說，寫到這里業(yè)務邏輯已經(jīng)完成了一半，甚至更多。因為本身項目就是一個點擊查看的單頁面應用，并不太復雜。但是所有的代碼都擠在一個類里，可讀性和擴展性都會變的很差。
所以是時候開始下一步了。

分包的精髓：拆。

import {
Component
} from '@angular/core';
class Gundam {
  name: string;
  type: string;
}
const GUNDAMS: Gundam[] = [
  {name: '海牛高達', type: 'NewType'},
  {name: '巴巴托斯', type: '近戰(zhàn)'},
  {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; // 通過參數(shù)賦值
  }
}

現(xiàn)在一個component擠了太多的東西，有數(shù)據(jù)、有常量、有template和class。如果項目很小的話(比如這個demo)還可以接受，但是一旦業(yè)務邏輯繁瑣起來就是totally disaster。

就算不介意坑別人，也別給隔了很久再去維護的自己找麻煩。

先把gundam這個class給摘出來，既然是model就好好呆在model的地方。

在src下新建model的包，新建一個gundam.ts的文件，把gundam class給ctrl+x過去。

在原本的地方導入：

import { Gundam } from '../../model/gundam';

再把數(shù)組常量給挪走，理論上數(shù)據(jù)是需要從服務端取，但是我不寫服務端好多年，所以還是繼續(xù)使用假數(shù)據(jù)。

在src新建包service,新建data.ts文件,導入gundam類以后導出數(shù)組：

import { Gundam } from './../model/gundam';
export const GUNDAMS: Gundam[] = [
  {name: '海牛高達', type: 'NewType'},
  {name: '巴巴托斯', type: '近戰(zhàn)'},
  {name: '力天使', type: '射擊'}
];

在原位置引入使用：

import { GUNDAMS } from './../../service/data';

ps:不要忘記在每個文件后空一行.雖然不空可以正常運行,但是會有錯誤提示.總的來說就是這么一個格式要求.

此時可以正常顯示，而app.component.ts里已經(jīng)整潔多了。

但是還不夠，現(xiàn)在要把詳情分離出去。讓上帝的歸上帝，凱撒的歸凱撒。主頁就處理主頁數(shù)據(jù)，詳情就處理詳情數(shù)據(jù)。

換句話說，把首頁分成兩個頁面：首頁 + 詳情。

需要用到的就是route。

PS，有關綁定：

Angular的綁定很有意思，有雙向的也有單向的，有在class里聲明一個變量在template里使用的，也有在template里暴露一個class里的變量給外界賦值的。目前我見到的是如下三種寫法（指在view里）：

1）{{變量名}}，單項綁定，class中的值會顯示到view里。

2）[變量名]，單項綁定，一般后面還會跟個“=”，用來給class里的變量或者屬性賦值。

3）*ngModel=[(變量名)]，雙向綁定。有關雙向綁定其實我還是有點不理解，官方文檔上也只是在表單處理時應用。大體上說雙向綁定就是綁定值后在頁面修改值可以影響class內(nèi)的值，而class內(nèi)的值改變后view的值也會改變。

比如可以雙向綁定一個input，初始化的時候從服務端讀取一個值放進去，同時這個值是可以修改的。修改完畢class里的值也變了，可以直接提交而不用多寫拿value的步驟。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論