Angular 角度5，组件之间的相互作用

目前正在学习Angular5课程，在对该主题进行了一段时间的研究之后，我仍然不完全理解以下内容：

代码： App.component.html：

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

  <p>
    <strong *ngIf="element.type === 'server'" style="color: red">
{{ element.content }}</strong>
    <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
  </p>

server-element.component.html：

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

  <p>
    <strong *ngIf="element.type === 'server'" style="color: red">
{{ element.content }}</strong>
    <em *ngIf="element.type === 'blueprint'">{{ element.content }}</em>
  </p>

问题: 我有点困惑这部分的作用：

  *ngFor="let serverElement of serverElements"
  [element]="serverElement"

---

在我目前的理解中，它是一个for循环，循环遍历serverElementsArray的所有元素。但是

[element]=“serverElement”

具体做了什么呢？

关于通过

serverElementsArray

的所有元素的循环，您是完全正确的

使用

[element]=…

绑定组件的输入。阅读…：-）

请注意它在-

appserver元素

组件上的循环位置。我假设这个组件负责打印我们的服务器详细信息

但是您必须以某种方式为它提供服务器，它应该打印出来。这就是

[element]=…

发挥作用的地方

注意

ServerElementComponent

的

@Input（）元素。这定义了组件接受一些输入值

因此，使用
[element]=…
可以将单个serverElement绑定到
ServerElementComponent
中名为
元素的
@Input
。循环中的每个项目都将有多个
ServerElementComponent
s。
使用@Input method，您只能在父子组件之间进行通信。
而且，管理父子组件的层次结构将变得很困难。
因此，考虑RXJS事件发射器，它允许使用与U/P>相关的公共服务来与兄弟组件通信。