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

說到指令就不得不提一下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<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>

通過上面的代碼可以知道：

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

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

selector: "appRepeat"
key: "in"

則命名為："appRepeatIn"。

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

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

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

最新評論