这个 Angular 2 示例究竟是如何工作的，它展示了如何通过父组件使用子组件属性？答案

【问题标题】：How exactly works this Angular 2 example showing how to use a subcomponent property by a parent component?这个 Angular 2 示例究竟是如何工作的，它展示了如何通过父组件使用子组件属性？
【发布时间】：2017-11-17 23:47:53
【问题描述】：

我是 Angular 2 的初学者，我对演示如何通过父组件访问子组件属性的教程示例有以下疑问。

进入主组件（app-component）我有这个app.component.html视图：

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

它在 app.component.ts 类中定义的 serverElements 数组上进行迭代，如下所示：

serverElements = [{type: 'server', name: 'TestServer', content: 'Just a Test'}];

它正在使用元素（此时只有 1 个，但这并不重要）到 <app-server-element> 组件中，该组件是 <app-component> 的子组件。

进入我拥有的 ServerElementComponent 类：

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {

  @Input('srvElement') element: {type: string, name: string, content: string};

  constructor() { }

  ngOnInit() {
  }
}

所以，进入 app.component.html 视图我有：

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

所以据我了解 [srvElement]="serverElement" 意味着我正在访问 ServerElementComponent 子组件类的这个属性（用 @输入

@Input('srvElement') element: {type: string, name: string, content: string};

那么基本上上一次迭代到底是什么意思？

我是这样解释的：

迭代 serverElements 数组（即具有指定字段集的 Object 的通用数组，该指定字段集对应于 @Input('srvElement') 元素的字段集 在 app-server-element 子组件中定义）。然后使用当前的 serverElement 元素在使用的组件中构建一个 @Input('srvElement') 元素（用于主视图）。

但我不确定这一点。这个 [srvElement]="serverElement" 语法的确切含义是什么？

也许我错了，但在我看来，这有点像强制转换：我有一个通用对象，它被强制转换为子组件所需的类型。我可以这样做，因为子组件中定义的类型由 @Input() 装饰器注释，因此父组件可以访问它。

这是正确的解释吗？

【问题讨论】：

标签： javascript angular typescript javascript-framework

【解决方案1】：

我不是专业人士，所以我将尝试用我自己的话简单地向您解释：

您从 HTML（您的第一个模板）开始。在里面，你可以看到

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

这里有几件事：

首先，您可以看到选择器app-server-element。这意味着整个标签将被您在组件中定义的 HTML 模板替换。
那么你有一个*ngFor。这是一个内置指令，允许您基于变量重复标记。
最后，您有了[srvElement] 属性。这是一个 Input 属性：等号右侧的内容（此处为serverElement）将被发送到您的组件。

现在在你的组件中，你可以看到

@Input('srvElement') element: {type: string, name: string, content: string};

这里所做的就是获取对之前发送的输入的引用：通过这样做，它告诉 Angular 将此变量绑定到它的“父”组件发送的内容。您还提供了元素应具有的结构（对应于您在“父级”中发送的变量的结构）。

所以用一句话来表达，对于它给出的第一个元素：

Iterate through serverElements, and for each item of this list, send this item to the "child" component and replace the app-server-element tag with the HTML template of the "child" component.

对于第二个元素，它给出：

Grab the value the "parent" component sent you, and register it in a variable so that you can use it in my HTML template (server-element.component.html)

我希望这对你有帮助。

【讨论】：

【解决方案2】：

在您的示例中，您有一个主组件“app-component”，其中包含serverElements 列表。

主组件的模板包含这个循环：

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

这意味着Angular将为serverElements中的每个项目生成一个app-server-element组件。

[srvElement]="serverElement" 表示对于每个app-server-element 组件，主组件（app-component）将当前的serverElement 作为input 提供给它。

所以如果你在 serverElements 中有 2 个项目，它将生成 2 个 app-server-element 组件：

第一个组件将收到serverElements中的第一个项目
第二个组件将收到serverElements中的第二个项目

您将拥有 app-server-element 组件的 2 个不同实例。

@Input() 装饰器不是指accessible by the parent，而是it's a data the component can receive as input given by his parent。

【讨论】：