Angular5,组件之间的交互
Angular5, Interaction between components
目前正在学习 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"
具体做什么呢?
关于 serverElementsArray
.
的所有元素的循环,你是完全正确的
使用[element]=...
绑定组件的输入。继续阅读... :-)
注意它在哪里循环 - app-server-element
组件。我假设此组件负责打印我们的服务器详细信息。
但是你必须以某种方式为它提供它应该打印出来的服务器。这就是 [element]=...
发挥作用的地方
注意 ServerElementComponent
的 @Input() element
部分。这定义了组件接受一些输入值。
因此使用 [element]=...
将单个 serverElement 绑定到 ServerElementComponent
中名为 element
的 @Input
。循环中的每个项目将有多个 ServerElementComponent
。
使用@Input 方法,您只能在父子组件之间进行通信。
管理父子组件的层次结构将变得困难。
所以考虑 Rxjs 事件发射器,它允许与兄弟组件通信,也使用引用 here
的公共服务
目前正在学习 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"
具体做什么呢?
关于 serverElementsArray
.
使用[element]=...
绑定组件的输入。继续阅读... :-)
注意它在哪里循环 - app-server-element
组件。我假设此组件负责打印我们的服务器详细信息。
但是你必须以某种方式为它提供它应该打印出来的服务器。这就是 [element]=...
发挥作用的地方
注意 ServerElementComponent
的 @Input() element
部分。这定义了组件接受一些输入值。
因此使用 [element]=...
将单个 serverElement 绑定到 ServerElementComponent
中名为 element
的 @Input
。循环中的每个项目将有多个 ServerElementComponent
。
使用@Input 方法,您只能在父子组件之间进行通信。 管理父子组件的层次结构将变得困难。 所以考虑 Rxjs 事件发射器,它允许与兄弟组件通信,也使用引用 here
的公共服务