在項(xiàng)目中常常會使用 ngFor指令，之前只會使用它，具體如何實(shí)現(xiàn)的卻不得而知。終于這幾天有時間"研究"了下它是如何實(shí)現(xiàn)的，順便自己寫個簡單的 ngFor指令：repeat

專業(yè)領(lǐng)域包括網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、商城網(wǎng)站制作、微信營銷、系統(tǒng)平臺開發(fā)， 與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，創(chuàng)新互聯(lián)的整合解決方案結(jié)合了幫做網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗(yàn)和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，為客戶提供全網(wǎng)互聯(lián)網(wǎng)整合方案。

說到指令就不得不提一下TemplateRef和ViewContainerRef

TemplateRef 可以理解為dom渲染模板，指令通過TemplateRef的模板來創(chuàng)建dom元素
ViewContainerRef 可以理解為TemplateRef的容器，在調(diào)用ViewContainerRef上的createEmbeddedView時，傳入TemplateRef和context就能創(chuàng)建出dom元素 此外還需要說明的是Angular的微語法，詳見下圖。

Angular會把微語法展開成ng-template的形式，支持傳入?yún)?shù)， TemplateRef
所關(guān)聯(lián)的則是ng-template內(nèi)的內(nèi)容，let variable則是聲明變量，如果后面沒有賦值操作，則這個變量取默認(rèn)值。這里取值和createEmbeddedView方法的context相關(guān)（后面會細(xì)說）。

代碼示例：

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
@Directive({
 selector: "[appRepeat]"
})
export class RepeatDirective {
 constructor(private tpl: TemplateRef, private vc: ViewContainerRef) {}
 @Input() set appRepeatIn(val: Array) {
  val.forEach((item, index) => {
   this.vc.createEmbeddedView(this.tpl, {
    $implicit: item,
    index: index,
    even: index % 2 === 0,
    odd: index % 2 === 1
   });
  });
 }
}

 

  

   
index: {{ index }}
   
item: {{ item }}
   
default: {{ defualt }}
   
even: {{ even }}
   
odd: {{ odd }}
  
 

網(wǎng)頁題目：淺析Angular實(shí)現(xiàn)一個repeat指令的方法-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/gsiej.html