Angular5,组件之间的交互

Question

目前正在进行Angular5课程,经过一段时间的研究后,我仍然完全不了解以下内容:

码:

App.component.html:

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

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!'},
                    {type: 'server', name:'Testserver',content:'just a test!'}
];  
   }

服务器element.component.html:

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

服务器element.component.ts:

import { Component, OnInit,Input } from '@angular/core';

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

题:

我对这部分的作用有点困惑:

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

在我目前的理解中,它是一个for循环,循环遍历serverElementsArray的所有元素.但那[element]="serverElement"具体做什么呢？

Answer 1

你完全正确的循环通过所有元素serverElementsArray.

使用[element]=...绑定组件的输入.继续阅读... :-)

注意它在哪里循环 - app-server-element组件.我假设该组件负责打印我们的服务器详细信息.

但你必须以某种方式提供它应该打印出来的服务器.那就是[element]=...发挥作用的地方

注意@Input() element部分ServerElementComponent.这定义了该组件接受一些输入值.

因此,使用[element]=...您将单个serverElement绑定到被@Input调用element 的ServerElementComponent.ServerElementComponent循环中的每个项目都会有多个s.