Angular4中如何實現綁定和分包

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

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

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

希望實現的效果長這個樣子：

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

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

<h2>Hello,World</h2>
<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: `
  <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其實是一個類，所以現在是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>

刷新頁面:

繼續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循環解析數組，進行數據渲染：

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

刷新頁面:

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

每一個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: `
    <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; // 通過參數賦值
  }
}

現在一個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的步驟。

以上是“Angular4中如何實現綁定和分包”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！