@Input和@Output
- 描述
- 在父子指令或者组件之间共享数据
- @Input
- 从父组件中把数据发送到子组件中
- 通过@Input装饰过的变量可以作为共享变量在父子组件之中使用,如下:
- 在子组件的ts文件中定义一个@Input类型的string变量item,默认值为空字符串
查看代码
import { Component, OnInit,Input, SimpleChanges } from '@angular/core'; @Component({ selector: 'app-ly-input-child', templateUrl: './ly-input-child.component.html', styleUrls: ['./ly-input-child.component.css'] }) export class LyInputChildComponent implements OnInit { // 使用@Input()来装饰item属性 @Input() item=''; constructor() { } ngOnInit(): void { } ngOnChanges(changes: SimpleChanges): void { console.log('onChange====>'+changes['item'].previousValue+'|||||CurrentValue='+changes['item'].currentValue); } }
- 在子组件的模板文件中作为插值字符串使用
查看代码
<p> ly-input-child works! Today's Item:{{item}} </p>
- 在父组件的ts文件中定义个名叫currentItem的变量并且赋值
查看代码
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ly-input-parent', templateUrl: './ly-input-parent.component.html', styleUrls: ['./ly-input-parent.component.css'] }) export class LyInputParentComponent implements OnInit { // 定义CurrentItem,用于和子组件中的@input类型的item变量绑定 currentItem = 'Liye in pain'; constructor() { } ngOnInit(): void { } }
- 在父组件的模板文件中引入子组件的模板文件,并且使用属性绑定把子组件的item属性绑定到父组件的currentItem属性上(记得在app.component.ts中导入FromModule组件哦,否则ngModel编译会报错的)
查看代码
<app-ly-input-child [item]="currentItem"></app-ly-input-child> ------------------------------------------------------------------- ly-input-parent works! <div> {{currentItem}}<br> <label for="item-name">currentItemName:</label> <input id="item-name" [(ngModel)]="currentItem" placeholder="name"> </div>
- 通过@
Input
()装饰器,angular把currentItem
的值传给了子组件的item
,然后在子组件上就可以渲染为字符串Liye in pain
- @Output
- 从子组件中利用发射器发送数据到父组件
- 子组件或者指令中的@Output()装饰器允许将数据从子组件传给父组件,如下:
- 在子组件的ts文件中用@Output()装饰器来装饰一个string类型的数据发送器newItemEvent,并且定义一个AddNewItem方法,内部实现为发送数据
查看代码
import { Component, OnInit } from '@angular/core'; import { Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-ly-output-child', templateUrl: './ly-output-child.component.html', styleUrls: ['./ly-output-child.component.css'] }) export class LyOutputChildComponent implements OnInit { // 定义一个被@Output装饰的string类型的事件发送器,代表此数据可以发送到父组件 @Output() newItemEvent = new EventEmitter<string>(); constructor() { } ngOnInit(): void { } // 将输入的数据发送到父组件中(父组件中将定义一个对象与newItemEvent进行绑定) addNewItem(value:string){ this.newItemEvent.emit(value); console.log(`child emit ${value}`); } }
- 在子组件的模板文件中定义一个input输入框,定义一个模板变量#newItem(允许在模板中的其他位置直接引用用户输入的数据);定义一个button按钮,用来向父组件发送数据
查看代码
<p>ly-output-child works!</p> <label for="item-input">Add an item:</label> <input type="text" id="item-input" #newItem> <button (click)="addNewItem(newItem.value)">Add to parent's list</button>
- 在父组件的ts文件中定义一个名叫items的Array,并且定义一个addItem的方法
查看代码
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-ly-output-parent', templateUrl: './ly-output-parent.component.html', styleUrls: ['./ly-output-parent.component.css'] }) export class LyOutputParentComponent implements OnInit { constructor() { } ngOnInit(): void { } items = ['item1','item2','item3','item4']; addItem(newItem:string){ this.items.push(newItem); } }
- 在父组件的模板文件中的子组件选择器上进行父子数据交互的绑定,也就是将子组件中的newItemEvent与父组件中的addItem方法进行绑定,那么,在子组件中当用户有输入的时候,@Output装饰的发送器会将数据发送给父组件
查看代码
<p>ly-output-parent works!</p> <app-ly-output-child (newItemEvent)="addItem($event)"></app-ly-output-child> <ul> <li *ngFor="let item of items">{{item}}</li> </ul>
- 结果呈现,使用ul来呈现数据效果
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析