angular - Angular 的 *ngFor 循环是如何实现的？

Question

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

对于反对者:我看到了 ng-for-of文件，尽管没有单独使用 passed to *ngFor array's e.g. join() 我知道的方法被调用了。谢谢你的支持 :)这是显示行为的插件:https://plnkr.co/edit/IXVxWrSOhLBgvSal6PWL?p=preview

Answer 1

这是一个高级概述。假设您这样定义模板:

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

然后它被编译器转换成如下:

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

然后 Angular 将 ngForOf 指令应用于模板元素。由于此指令的宿主元素是模板，因此它会注入(inject) templateRef。它还注入(inject)充当 anchor 元素的 viewContainerRef 并将用于在旁边添加 DOM 元素:

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

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

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

然后在每个检查检测周期中，它使用此差异将值与以前的值进行比较:

  ngDoCheck(): void {
    if (this._differ) {
      const changes = this._differ.diff(this.ngForOf);
      if (changes) this._applyChanges(changes);
    }
  }

如果值发生更改，它会应用更改并执行以下操作:

1) 为items

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

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

2) 使用 templateRef 创建带有此上下文的嵌入式 View ，它有效地在 DOM 中呈现新值

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

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 调用 here因为您的应用程序正在开发模式下运行:

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';
  }
}

如果启用生产模式，将不再调用此函数。检查the plunker .