哈Ha！ 我向您展示
foolishneo撰写的文章
“了解Angular中的@ Input，@ Output和EventEmitter” 。
向所有希望积累有关Angular框架复杂性信息的人致以问候。
今天，我认为有必要更好地研究有关Angular组件之间的交互组织的信息，并开始练习用英语翻译我感兴趣的文章。
我希望对某些人来说，
Medium文章的翻译对他们有用。
长期以来，我希望开始用英语翻译有用的文章，因此，我决定从一个简单的，不是很繁琐的，但可能是对文章现有知识的补充开始。 请注意，先生们...
对于Angular的新手来说，
输入和
输出装饰器可能会令人尴尬，尤其是当您尝试通过代码示例确定其用途时。 在本文中，我将尝试以最简单的方式来解释它们。
资料交换工具
首先，
输入和
输出装饰器的任务是在组件之间交换数据。 它们是一种用于将数据从一个组件发送到另一个组件的机制。
输入用于接收数据，而
输出用于发送数据。
输出通过将数据公开为事件生产者（通常作为
EventEmitter类的对象）来发送数据
。因此，当您看到代码时，就像这样：
@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
他的意思是：
- 嘿，我希望有数据发送给我。 我将获取它们并将其保存为item属性的值。
- 顺便说一下，我将成为使用onChange属性发送数据的原因。
假设您有一个包含
TodoItem组件的
TodoList组件。
在
TodoLis t组件模板中，您期望看到：
... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
这是什么意思：
- TodoList组件将数据值放入其myTask属性中，并将其传递给TodoItem组件
- 从TodoItem组件传输的数据将由TodoList组件的handleChange（）函数接收和处理。
足够的理论。 让我们来看一个例子。
注意
一个例子。在这里，我创建了2个组件，它们是
hello组件，它们嵌套在
app组件中。
hello组件具有
Input和
Output ：
hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() }
hello组件期望获得一个字符串值，并将其作为
myFriend属性的值。
@Input() myFriend: string
每次单击它时，
Output装饰器的
onClick数据发送属性将向字符串“外界”传输一个包含“ Neo”内容的字符串。
<h3 (click)="onClick.emit('Neo')">
以下是
应用程序组件代码：
app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3>
请注意，
应用程序组件在其模板中使用
hello component标签，该标签执行2个操作：
- 使用ng属性将字符串“ Angular”的值传递给 hello组件
- 并从hello组件接收发送的值，并使用upCase（）函数处理接收到的值：
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
您可以在
此处查看正在运行的应用程序
。