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

Question

我完全是 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 class 的 serverElements 数组上迭代，像这样：

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

并且它正在使用元素（此时只有 1，但这并不重要）进入 <app-server-element> 组件，该组件是 <app-component>.

的子组件

进入ServerElementComponent class 我有：

@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 子组件 class（用 @Input

注释

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

基本上，上一次迭代的确切含义是什么？

我是这样解读的：

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

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

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

这个解释正确吗？

Answer 1

在您的示例中，您有一个主要组件 "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 组件，主要组件（应用程序组件）将当前 serverElement 作为 input.

因此，如果您在 serverElements 中有 2 个项目，它将生成 2 个 app-server-element 组件：

第一个组件将收到 serverElements
第二个组件将收到 serverElements

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

@Input() 装饰器并不意味着 accessible by the parent 而是 it's a data the component can receive as input given by his parent.

Answer 2

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

您从 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 将此变量绑定到它的 "parent" 组件发送的内容。您还给出了元素应该具有的结构（对应于您在 "parent" 中发送的变量的结构）。

因此，在句子中，对于它给出的第一个元素：

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)

希望对您有所帮助。

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

How exactly works this Angular 2 example showing how to use a subcomponent property by a parent component?

javascript

javascript-framework

typescript

angular

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

How exactly works this Angular 2 example showing how to use a subcomponent property by a parent component?

javascript

javascript-framework

typescript

angular

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