角度输入和输出的用法

Angular的核心组件化可以说相当彻底。为了实现组件之间的通信，输入和输出是必不可少的。通过对输入输出的学习，加深了对组件化的理解。

组件输入

Angular允许以两种形式定义组件的输入，一种由装饰器@Component中的输入定义，另一种由@Input定义。

输入

首先，介绍了装饰器中使用的输入。Inputs接收一个字符串数组，它指定了我们输入的键名。

@ Component({ selector : ' my-Component '，inputs: ['name']})类MyComponent { name: string}name将对应于我们组件中的name变量。

然后我们定义一个组件，这个组件有时不可避免地会用到其他组件的模板中，所以我们可以这样写。

父组件：

导出类AppComponent { myName=' Zhang San '；}上级组件模板：

app-messages[name]=' my name '/app-messages方括号[]:数据绑定，也称为输入绑定。将等号右边的变量绑定到左边[]的变量。我们的组件：

@ Component({ selector : ' app-messages '，inputs: ['name']，templateUrl: '。/messages.component.html '，styleurls 3360[]。/messages.component.css']})导出类MessagesComponent实现OnInit { name:字符串；}这里我们接受名为的上级组件的myName。

通过上图，很容易看出输入数据的对应关系。

然后我们打印出来，看看变量是否输入成功。

导出类消息组件实现OnInit { name:字符串；ngOnInit(){ console . log(this . name)；} }

输入成功！

@输入

上面我们实现了组件的数据输入，但是angular不符合当前的情况，提供了另一种输入法，即@Input。

@ Component({ selector : ' my-Component ' })类MyComponent { @Input() name:字符串；}在我们的组件中定义变量时，只需使用@Input装饰器。与上面相比，当我们使用输入时，我们缺少一个二级声明。这种方法感觉数据的传输关联少，更容易理解，代码更工整。

组件输出

完成组件的输入后，我们应该谈谈组件的输出。要从组件传递数据，可以使用输出绑定。

button(click)=' display()'/button括号():事件绑定，也称为输出绑定。这里我们听点击事件，然后触发显示方法。除了点击，angular还有很多内置事件。当然，当我们编写自己的组件时，我们也可以定制一个事件来与外部通信。

自定义事件

自定义事件需要做三件事：

1.在@Component配置中，创建输出配置项。2.在配置的属性中设置一个事件发射器。3.在适当的时间触发事件，即在要触发的方法中。

让我们看看下面的例子：

@ Component({ selector : ' my-Component '，output s 3360[' new event ']})导出类my Component { new event : event emiteterstring；constructor(){ this . new event=new event emitter()；} display(): void { this . newevent . emit(' test event ')；}}然后我们可以通过上面模板中的代码实现输出。

如果我们想在父组件中使用这个输出，我们必须使用我们自己的事件。让我们看一个例子：

父组件：

导出类AppComponent {.showEvent(message:字符串){ console . log(` hello : $ { message } `)；}}父模板：

App-messages(新活动)=' show event($ event)'/app-messages我们的组件：

@ Component({ selector : ' app-messages '，outputs: ['newEvent']，templateUrl: '。/messages.component.html'})导出类消息组件{ new event : event emiteterstring；构造函数(私有MessageService : MessageService){ this . new event=new event emitter()；} display(): void { this . newevent . emit(' test event ')；}}我们的组件模板：

button(click)=' display()' trigger/button引用文本然后单击trigger，可以看到输出hello:test事件。数据输出成功！

好了，我们来梳理一下整个输出过程：

1.我们通过内置的click事件定制一个组件来触发显示方法，然后我们将触发我们定制的事件：newEvent。

2.当事件被触发时，他将执行下一个更高层次的方法：showEvent。

3.我们的事件输出一个字符串测试事件，然后通过$event获取输出结果，并将其作为参数传递给上一级的方法showEvent

@输出

和输入一样，angular也为我们提供了第二种输出方式：@Output。

用法类似@input:

导出类消息组件{ @ Output()new event : event emiteterstring；}仅在定义时，省略了重新声明的步骤。

官方参考：https://angular.io/api/core/Component

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。