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

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

src目錄下的app/app.component.ts文件是一個標準的angular4組件的結構。

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

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

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

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

<h2>Hello,World</h2>
<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）內，在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 = '海牛高達';
  type = 'NewType';
}

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

當然，gundam其實是一個類，所以現(xiàn)在是model上場的時候了。

定義一個類 gundam：

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

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

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

typescript 的語法有點奇怪，定義某個變量是某種類型的寫法，是變量名在前變量類型在后。

改變temple里的引用：

<h2>Hello,World</h2>
<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ù)據。

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ù)據渲染：

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

刷新頁面:

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

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

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

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

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

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

刷新頁面

 

點擊巴巴托斯

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

分包的精髓：拆。

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: `
    <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; // 定義一個selectedGudam作為展示詳情的變量
  onSelected (gundam: Gundam): void {
  this.selectedGundam = gundam; // 通過參數(shù)賦值
  }
}

現(xiàn)在一個component擠了太多的東西，有數(shù)據、有常量、有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ù)據是需要從服務端取，但是我不寫服務端好多年，所以還是繼續(xù)使用假數(shù)據。

在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里已經整潔多了。

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

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

需要用到的就是route。

PS，有關綁定：

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

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

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

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

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

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

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

分享標題：Angular4中如何實現(xiàn)綁定和分包-創(chuàng)新互聯(lián)
網站路徑：http://chinadenli.net/article20/pipco.html

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

廣告

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