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

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

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

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

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

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

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

上面部分先充當(dāng)項(xiàng)目簡(jiǎn)介。

中間的span假裝是高達(dá)列表。

下面的div包裹的兩個(gè)span假裝是高達(dá)詳情。

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

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

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

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

綁定：你有我有全都有。

在同一個(gè)組件（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 = '海牛高達(dá)';
  type = 'NewType';
}

刷新頁面，依然可以顯示：

當(dāng)然，gundam其實(shí)是一個(gè)類，所以現(xiàn)在是model上場(chǎng)的時(shí)候了。

定義一個(gè)類 gundam：

class Gundam {
  name: string;
  type: string;
}

改寫name和type，讓他們成為屬性值而不是string常量:

gundam: Gundam = {
  name: '海牛',
  type: 'NewType'
};

typescript 的語法有點(diǎn)奇怪，定義某個(gè)變量是某種類型的寫法，是變量名在前變量類型在后。

改變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代碼。

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

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

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

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

gundams = GUNDAMS;

修改template，用*ngFor循環(huán)解析數(shù)組，進(jìn)行數(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ù)來變化了(當(dāng)然數(shù)據(jù)流還是有待商榷)，下面來修改使得詳情能根據(jù)點(diǎn)擊的列表項(xiàng)變化。

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

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

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

因?yàn)閂iew里用到的onSected函數(shù)來自controller，也就是class，所以需要補(bǔ)充：

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

修改template中的html顯示：

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

此時(shí)刷新頁面會(huì)報(bào)錯(cuò)，因?yàn)?strong>雖然通過點(diǎn)擊div可以給selectedGudam賦值，但是當(dāng)selectedGundam被初始化的時(shí)候是沒有值的。

有兩種解決辦法：

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

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

因?yàn)閍ngular提供了ngIf修飾，用第二種方法會(huì)比較省事一點(diǎn)。

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

刷新頁面

點(diǎn)擊巴巴托斯

總的來說，寫到這里業(yè)務(wù)邏輯已經(jīng)完成了一半，甚至更多。因?yàn)楸旧眄?xiàng)目就是一個(gè)點(diǎn)擊查看的單頁面應(yīng)用，并不太復(fù)雜。但是所有的代碼都擠在一個(gè)類里，可讀性和擴(kuò)展性都會(huì)變的很差。
所以是時(shí)候開始下一步了。

分包的精髓：拆。

import {
Component
} from '@angular/core';
class Gundam {
  name: string;
  type: string;
}
const GUNDAMS: Gundam[] = [
  {name: '海牛高達(dá)', 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; // 定義一個(gè)selectedGudam作為展示詳情的變量
  onSelected (gundam: Gundam): void {
  this.selectedGundam = gundam; // 通過參數(shù)賦值
  }
}

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

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

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

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

在原本的地方導(dǎo)入：

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

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

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

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

在原位置引入使用：

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

ps:不要忘記在每個(gè)文件后空一行.雖然不空可以正常運(yùn)行,但是會(huì)有錯(cuò)誤提示.總的來說就是這么一個(gè)格式要求.

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

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

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

需要用到的就是route。

PS，有關(guān)綁定：

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

1）{{變量名}}，單項(xiàng)綁定，class中的值會(huì)顯示到view里。

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論