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

說(shuō)到指令就不得不提一下TemplateRef和ViewContainerRef

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

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

代碼示例：

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

通過(guò)上面的代碼可以知道：

let 聲明變量(index,even,odd)可以使用createEmbeddedView方法傳入context 的屬性值(index,even,odd)進(jìn)行賦值，如果只聲明了變量并無(wú)賦值操作，則會(huì)使用context的屬性值($implicit)進(jìn)行賦值。

keyExp 為 Directive 聲明Input屬性，Directive的Input屬性名格式為"[selector]key",遵循CamelCase命名規(guī)則，例如上面的例子:

selector: "appRepeat"
key: "in"

則命名為："appRepeatIn"。

Directive 可以通過(guò)Input傳入的數(shù)據(jù)來(lái)進(jìn)行創(chuàng)建頁(yè)面視圖

總結(jié)：通過(guò)本文可以知道在Angular中如何創(chuàng)建一個(gè)簡(jiǎn)單的結(jié)構(gòu)指令，指令展開的微語(yǔ)法（展開形式，傳入數(shù)據(jù)，賦值操作），使用createEmbeddedView和TemplateRef來(lái)創(chuàng)建dom元素。如有疑問(wèn)，可以查看源代碼 或者在下面留言～

以上所述是小編給大家介紹的Angular 實(shí)現(xiàn)一個(gè)repeat指令的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論