Question

我是Angular 2中的新手，我不是很喜欢JavaScript \ TypeScript（我来自Java），我对我正在研究的一个例子有一些疑问，该例子涉及组件如何使用另一个组件中定义的属性（property \ event binding）。该示例显示如何在子组件中声明元素数组，并在父组件中显示。

所以我有 app-component ，即父组件。

这是 app-component ＆＃34; view＆＃34;命名为 app-component.html ：

<div class="container">
  <app-cockpit></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element
        *ngFor="let serverElement of serverElements"
        [element]="serverElement"></app-server-element>
    </div>
  </div>
</div>

从我可以理解的这段代码生成 app-server-element （我的应用程序的另一个组件及其布局）从 serverElements 数组开始生成 app.component.ts 类，这一个：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'TestServer', content: 'Just a Test'}];
}

所以我在这里首先怀疑：做：

<app-server-element
    *ngFor="let serverElement of serverElements"
    [element]="serverElement">
</app-server-element>

* ngFor 指令正在 serverElements 数组上进行迭代，该数组定义在 app.component.ts 类中（与主要相关） app-component 组件），而不是 server-element.component.ts 类（与组件相关）。

它工作正常，但在我看来有点奇怪。为什么？我的想法是， * ngFor 指令被声明为与相关的 app-component.html 的HTML代码，因此迭代是在相关类中定义的数组上。

是或者我错过了什么？

Answer 1

在角度中，当你写一个指令前面有一个aserisk，它实际上是一个更复杂结构的语法糖。对于*ngFor，documentation给出了此示例：

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

首先将*ngFor重写为template属性：

<div template="ngFor let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

然后将template属性提取到包含原始ng-template的元素的*ngFor指令。

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

您的代码也会进行相同的重写：

<app-server-element
    *ngFor="let serverElement of serverElements"
    [element]="serverElement">
</app-server-element>

实际上只是一个简写：

<ng-template ngFor let-serverElement [ngForOf]="serverElements">
    <app-server-element [element]="serverElement"></app-server-element>
</ng-template>

从ngFor的扩展形式可以看出，serverElements完全在app-server-element组件之外被引用。

在这个例子中，Angular * ngFor究竟是如何工作的？

1 个答案: