角中输入和输出有什么用

　　介绍

这篇文章将为大家详细讲解有关角中输入和输出有什么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

输入是属性装饰器,用来定义组件内的输入属性。在实际应用场合,我们主要用来实现父组件向子组件传递数据.Angular应用是由各式各样的组件组成,当应用启动时,角会从根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。

@Input ()

counter.component.ts 　　进口输入}{组件,& # 39;@angular/核心# 39;; 　　@ component ({ 　　选择器:& # 39;exe-counter& # 39; 　　模板: 　　& lt; p>当前值:{{数}}& lt;/p> 　　& lt;按钮(点击)=癷ncrement()“比;+ & lt;/button> 　　& lt;按钮(点击)=凹趿?)“比;- & lt;/button> 　　｀ 　　}） 　　出口类CounterComponent { 　　@Input()数:数量=0; 　　增加(){ 　　this.count + +; 　　} 　　减量(){ 　　this.count——; 　　} 　　}

app.component.ts

进口{组件}& # 39;@angular/核心# 39;; 　　@ component ({ 　　选择器:& # 39;exe-app& # 39; 　　模板: 　　& lt; exe-counter[数]=癷nitialCount"祝辞& lt;/exe-counter> 　　｀ 　　}） 　　出口类AppComponent { 　　initialCount:数量=5; 　　}

@Input (bindingPropertyName)

输入装饰器支持一个可选的参数,用来指定组件绑定属性的名称。如果没有指定,则默认使用@Input装饰器,装饰的属性名,具体示例如下:

counter.component.ts 

进口输入}{组件,& # 39;@angular/核心# 39;;
　　@ component ({
　　选择器:& # 39;exe-counter& # 39;
　　模板:
　　& lt; p>当前值:{{数}}& lt;/p>
　　& lt;按钮(点击)=癷ncrement()“比;+ & lt;/button>
　　& lt;按钮(点击)=凹趿?)“比;- & lt;/button>
　　｀
　　}）
　　出口类CounterComponent {
　　@Input(& # 39;价值# 39;)数:数量=0;
　　…//其余代码未改变
　　}

app.component.ts 

进口{组件}& # 39;@angular/核心# 39;;
　　@ component ({
　　选择器:& # 39;exe-app& # 39;
　　模板:
　　& lt; exe-counter(价值)=癷nitialCount"祝辞& lt;/exe-counter>
　　｀
　　}）
　　出口类AppComponent {
　　initialCount:数量=5;
　　}

setter,getter

setter和getter是用来约束属性的设置和获取,它们提供了一些属性读写的封装,可以让代码更便捷,更具可扩展性。通过setter和getter方式,我们对类中的私有属性进行了封装,能避免外界操作影响到该私有属性。此外通过setter我们还可以封装一些业务逻辑,具体示例如下:

counter.component.ts

进口输入}{组件,& # 39;@angular/核心# 39;; 　　@ component ({ 　　选择器:& # 39;exe-counter& # 39; 　　模板: 　　& lt; p>当前值:{{数}}& lt;/p> 　　& lt;按钮(点击)=癷ncrement()“比;+ & lt;/button> 　　& lt;按钮(点击)=凹趿?)“比;- & lt;/button> 　　｀ 　　}） 　　出口类CounterComponent { 　　_count:数量=0;//默认私有属性以下划线开的头,不是必须也可以使用美元计算 　　biggerThanTen:布尔=false; 　　@Input () 　　设置计数(num: number) { 　　这一点。biggerThanTen=num比;10; 　　这一点。_count=num; 　　} 　　得到数():{数量 　　返回this._count; 　　} 　　增加(){ 　　this.count + +; 　　} 　　减量(){ 　　this.count——; 　　} 　　}

ngOnChanges

当数据绑定输入属性的值发生变化的时候,角将会主动调用ngOnChanges方法。它会获得一个SimpleChanges对象,包含绑定属性的新值和旧值,它主要用于监测组件输入属性的变化,具体示例如下:

{进口组件,输入、SimpleChanges>让numberEmitter: EventEmitter=新EventEmitter (); 　　numberEmitter。订阅((价值:数量)=比;console.log(值)); 　　numberEmitter.emit (10);

在角中的EventEmitter应用场景是:

子指令创建一个EventEmitter实例,并将其作为输出属性导出。子指令调用已创建的EventEmitter实例中的排放(载荷)方法来触发一个事件,父指令通过事件绑定(eventName)的方式监听该事件,并通过事件对美元象来获取载荷对象。是不是感觉有点抽象,我们马上实战一下。

@Output ()

counter.component.ts 　　进口{组件,输入、输出EventEmitter} & # 39; @angular/核心# 39;; 　　@ component ({ 　　选择器:& # 39;exe-counter& # 39; 　　模板: 　　& lt; p>当前值:{{数}}& lt;/p> 　　& lt;按钮(点击)=癷ncrement()“比;+ & lt;/button> 　　& lt;按钮(点击)=凹趿?)“比;- & lt;/button> 　　｀ 　　}） 　　出口类CounterComponent { 　　@Input()数:数量=0; 　　@Output()变化:EventEmitter

角中输入和输出有什么用