Angular4中如何實(shí)現(xiàn)綁定和分包-創(chuàng)新互聯(lián)

這篇文章主要介紹Angular4中如何實(shí)現(xiàn)綁定和分包，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

為白水等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及白水網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、做網(wǎng)站、白水網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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)，而是鍵盤(pán)1左邊、tab鍵上面的那個(gè)符號(hào))包裹的是View，下面export的class部分是Controller。

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

萬(wàn)里長(zhǎng)征第一步，先從修改View開(kāi)始。

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

<h2>Hello,World</h2>
<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á)詳情。

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

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

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

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

綁定：你有我有全都有。

在同一個(gè)組件（component）內(nèi)，在class（Controller）里定義的變量名，可以直接在template（View）里使用。

@Component({
  selector: 'my-app',
  template: `
  <h2>Hello,World</h2>
  <p>你好,gundam meister</p>
  <span>{{name}}</span>
  <div>
    <span>{{name}}</span>
    <span>{{type}}</span>
  </div>
  `
})
export class AppComponent {
  name = '海牛高達(dá)';
  type = 'NewType';
}

刷新頁(yè)面，依然可以顯示：

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

定義一個(gè)類(lèi) gundam：

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

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

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

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

改變temple里的引用：

<h2>Hello,World</h2>
<p>你好,gundam meister</p>
<span>{{gundam.name}}</span>
<div>
  <span>{{gundam.name}}</span>
  <span>{{gundam.type}}</span>
</div>

刷新頁(yè)面:

繼續(xù)review代碼。

主頁(yè)展示的是一個(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)簽來(lái)循環(huán)列表，不過(guò)現(xiàn)在4.0以上的時(shí)代變成了標(biāo)簽里一個(gè)特殊的修飾：*ngFor。

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

gundams = GUNDAMS;

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

<h2>Hello,World</h2>
<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>

刷新頁(yè)面:

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

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

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

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

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

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

修改template中的html顯示：

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

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

有兩種解決辦法：

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

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

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

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

刷新頁(yè)面

 

點(diǎn)擊巴巴托斯

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

分包的精髓：拆。

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: `
    <h2>Hello,World</h2>
    <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; // 通過(guò)參數(shù)賦值
  }
}

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

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

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

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

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

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

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

在src新建包service,新建data.ts文件,導(dǎo)入gundam類(lèi)以后導(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ò)誤提示.總的來(lái)說(shuō)就是這么一個(gè)格式要求.

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

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

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

需要用到的就是route。

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

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

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

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

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

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

以上是“Angular4中如何實(shí)現(xiàn)綁定和分包”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享標(biāo)題：Angular4中如何實(shí)現(xiàn)綁定和分包-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://muchs.cn/article20/pipco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站收錄、外貿(mào)建站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)