Angular的* ngFor循环如何实现？


How is Angular's *ngFor loop implemented?

我想知道Angular的*ngFor指令实际上是如何工作的？我想知道使用该指令时发生的整个过程。

对于不赞成投票的人：我已经看过ng-for-of文件，尽管没有单个用法传递给*ngFor数组的例子。我知道的join()方法被调用。谢谢你的支持 ：)
这是显示该行为的插件：https://plnkr.co/edit/IXVxWrSOhLBgvSal6PWL?p=preview

相关讨论

这里是高级概述。假设您这样定义模板：

1
<span *ngFor="let item of items">{{item}}</span>

然后由编译器将其转换为以下内容：

1
2
3
<ng-template let-item [ngForOf]="items">
    <span>{{item}}</span>
</ng-template>

然后Angular将ngForOf指令应用于模板元素。由于此伪指令的宿主元素是模板，因此将注入templateRef。它还注入用作锚元素的viewContainerRef，将用于在旁边添加DOM元素：

1
2
3
  constructor(
       private _viewContainer: ViewContainerRef,
       private _template: TemplateRef<NgForOfContext< T >>,

指令将ngForOf定义为输入，然后等待它被初始化并创建一个不同的内容：

1
2
3
  ngOnChanges(changes: SimpleChanges): void {
      const value = changes['ngForOf'].currentValue;
          this._differ = this._differs.find(value).create(this.ngForTrackBy);

然后在每个检查检测周期中，使用以下区别将值与以前的值进行比较：

1
2
3
4
5
6
  ngDoCheck(): void {
    if (this._differ) {
      const changes = this._differ.diff(this.ngForOf);
      if (changes) this._applyChanges(changes);
    }
  }

如果值发生更改，它将执行以下操作来应用更改：

1)为items

中的每个项目生成嵌入式视图上下文

1
context = new NgForOfContext< T >(null !, this.ngForOf, -1, -1)

2)使用templateRef在此上下文中创建嵌入式视图，该视图有效地在DOM

中呈现新值

1
2
this._viewContainer.createEmbeddedView(
                this._template, context , currentIndex);

3)将相关值添加到上下文

1
2
3
  viewRef.context.index = i;
  viewRef.context.count = ilen;
  viewRef.context.$implicit = record.item;`

现在，您的问题：

although it doesn't explain why e..g join() method is invoked on array
passed to

在这里由功能normalizeDebugBindingValue调用，因为您的应用程序在开发模式下运行：

1
2
3
4
5
6
7
8
9
function normalizeDebugBindingValue(value: any): string {
  try {
    // Limit the size of the value as otherwise the DOM just gets polluted.
    return value != null ? value.toString().slice(0, 30) : value;
                           ^^^^^^^^^^^^^^^
  } catch (e) {
    return '[ERROR] Exception while trying to serialize the value';
  }
}

如果启用生产模式，将不再调用此功能。检查活塞。

相关讨论