浅析Angular 实现一个repeat指令的方法

在项目中常常会使用 ngfor指令，之前只会使用它，具体如何实现的却不得而知。终于这几天有时间"研究"了下它是如何实现的，顺便自己写个简单的 ngfor指令：repeat

说到指令就不得不提一下templateref和viewcontainerref

templateref 可以理解为dom渲染模板，指令通过templateref的模板来创建dom元素
viewcontainerref 可以理解为templateref的容器，在调用viewcontainerref上的createembeddedview时，传入templateref和context就能创建出dom元素 此外还需要说明的是angular的微语法，详见下图。

 

angular会把展开成ng-template的形式，支持传入参数， templateref
所关联的则是ng-template内的内容，let variable则是声明变量，如果后面没有赋值操作，则这个变量取默认值。这里取值和createembeddedview方法的context相关（后面会细说）。

代码示例：

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)进行赋值，如果只声明了变量并无赋值操作，则会使用context的属性值($implicit)进行赋值。

keyexp 为 directive 声明input属性，directive的input属性名格式为"[selector]key",遵循camelcase命名规则，例如上面的例子:

selector: "apprepeat"
key: "in"

则命名为："apprepeatin"。

directive 可以通过input传入的数据来进行创建页面视图

总结：通过本文可以知道在angular中如何创建一个简单的结构指令，指令展开的微语法（展开形式，传入数据，赋值操作），使用createembeddedview和templateref来创建dom元素。如有疑问，可以查看 或者在下面留言～

以上所述是小编给大家介绍的angular 实现一个repeat指令的方法，希望对大家有所帮助