分析安格尔实现重复指令的方法

NgFor命令在项目中经常使用，但以前只使用过，如何实现还不得而知。最后，我有时间‘研究’过去几天它是如何实现的，顺便写一个简单的ngFor指令：repeat

说到指令，你不得不提到TemplateRef和ViewContainerRef

TemplateRef可以理解为dom呈现模板，指令通过TemplateRef模板创建dom元素。ViewContainerRef可以理解为TemplateRef的容器。在ViewContainerRef上调用createEmbeddedView时，可以通过传入TemplateRef和上下文来创建dom元素。此外，还需要解释Angular微语法，如下图所示。

Angular将微语法扩展为ng-template，支持传入参数。TemplateRef与ng-template中的内容相关，let变量是一个声明的变量。如果没有赋值操作，该变量将采用默认值。这里的值与createEmbeddedView方法的上下文相关(稍后将详细描述)。

代码示例：

从“@angular/core”导入{ Directive，Input，TemplateRef，viewcontainererf }；@ Directive({ selector : '[appRepeat]' })export class repeatdireactive { constructor(private TPL : TemplateRefany，private VC : viewcontainererff){ } @ Input()set apparepeatin(val : Arrayany){ val . foreach((item，index)={ this . VC . createembedview(this . TPL，{ $ implicit: item，index: index，even: index % 2===)});} } ul li * appRepeat=' let itemin:项；让index=index让偶数=偶数；让奇数=奇数；让德福尔特' ul class='{{ even ' '偶数' : '奇数' }}' Li索引： { { index } }/Li iitem : { { item } }/Li Li default 3360 { { default } }/Li lieven : { {偶数} }/Li liod : { {奇数

让声明的变量(索引、偶数、奇数)可以通过使用createEmbeddedView方法传入上下文的属性值(索引、偶数、奇数)来赋值。如果只声明变量而没有赋值操作，上下文的属性值($implicit)将用于赋值。

KeyExp声明了指向性的Input属性，指向性的Input属性名称的格式为“[selector]key”，它遵循CamelCase的命名规则，比如上面的例子：

'选择一个： 'appRepeat'key: 'in '

名字是：‘appre peatin’。

指令可以通过输入数据来创建页面视图

总结：通过这篇文章，我们可以知道如何在Angular中创建一个简单的结构指令，指示扩展的微语法(扩展形式、传入数据、赋值操作)，并使用createEmbeddedView和TemplateRef创建dom元素。如有疑问，可以查看源代码或在下方留言~

以上是Angular实现边肖介绍的重复指令的方法。希望对大家有帮助。如果你有任何问题，请给我留言。边肖会及时回复你的！