angular之Input和Output

简介: angular之Input和Output

Input
一个装饰器,用来把某个字段标记为输入属性,该输入属性会绑定到模板中的某个DOM属性。当变更检测的时候,angular会自动使用这个DOM属性的值来更新此数据属性。
1:格式

@Input(bindingPropertyName:string | undefined):any;

2:使用

//父组件
<test-child [title]="childTitle" child-id="1"></test-child>
//子组件
@Input() title='';
@Input('child-id') id='';

上述id就是起的child-id的别名,在子组件中就会使用id代替child-id。
同时我们还可以把Input和set/get结合起来使用,拿到title值之后做一些操作。

//子组件
@Input() set title(value:string){
   
  this.otherTitle =value;
}

Output
一个装饰器,用于把一个类字段标记为输出属性。借助EventEmitter来进行子组件往父组件传递内容。
在子组件中创建一个EventEmitter的实例作为输出属性,在父组件中通过事件绑定的方法监听,当子组件调用输出属性.emit(把吧啦吧啦)的时候,父组件就会接受到该消息。

//子组件
@Output() titleNm:EventEmitter<string> = new EventEmitter<string>();
ngOnInit() {
   
  this.titleNm.emit('吧啦吧啦');
}
//父组件
<app-test-child (titleNm)="titleNmValue($event)"></app-test-child>
titleNmValue(nm:string):void {
   
  console.log(nm);
}
相关文章
|
5月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
5月前
|
JavaScript
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
|
JavaScript API
Angular input decorator学习笔记
https://angular.io/api/core/Input Input decorator只能用在Angular class字段里, 用于指定元数据,将class字段指定成input property.
Angular input decorator学习笔记
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
120 0
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
|
JavaScript 容器
Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景
211 0
Angular应用input和div标签页的动态创建场景
|
Web App开发 开发者
Angular应用里input字段后面的_ngcontent-hqi是什么含义
Angular应用里input字段后面的_ngcontent-hqi是什么含义
110 0
Angular应用里input字段后面的_ngcontent-hqi是什么含义
|
JavaScript 前端开发
Angular input控件的click事件表达式如何被转换成JavaScript函数
Angular input控件的click事件表达式如何被转换成JavaScript函数
151 0
Angular input控件的click事件表达式如何被转换成JavaScript函数
Angular input控件的click事件响应处理的调用上下文
Angular input控件的click事件响应处理的调用上下文
138 0
Angular input控件的click事件响应处理的调用上下文
在Angular应用的child Component里同时使用@Input和@Output
在Angular应用的child Component里同时使用@Input和@Output
115 0
在Angular应用的child Component里同时使用@Input和@Output
|
监控 中间件 API
Angular应用里的@Input和@Output注解使用方法介绍
Angular应用里的@Input和@Output注解使用方法介绍
297 0
Angular应用里的@Input和@Output注解使用方法介绍