Angular5，组件之间的交互

Posted 2023-03-13

【中文标题】Angular5，组件之间的交互

【英文标题】：Angular5, Interaction between components

【发布时间】：2018-04-25 14:18:17

【问题描述】：

目前正在学习 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!'
];  
   

服务器元素.component.html：

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

服务器元素.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"

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

【参考方案1】：

关于serverElementsArray 的所有元素的循环你是完全正确的。

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

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

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

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

因此，使用 [element]=... 将单个 serverElement 绑定到 @Input 在 ServerElementComponent 中称为 element。循环中的每一项都会有多个ServerElementComponents。

【参考方案2】：

使用@Input 方法只能在父子组件之间进行通信。 并且很难管理父子组件的层次结构。 所以考虑 Rxjs 事件发射器，它允许与兄弟组件进行通信，也可以使用公共服务来引用 here