网站建设技术和销售工资,优质的网站建设案例,wordpress 重新生成,杭州e时代网站建设1. Output
input 好比重力#xff0c;向下传递数据#xff0c;list 传给 detail#xff0c;smart 组件传给 dumb 组件#xff0c;父组件传给子组件。input 顾名思义#xff0c;输入数据给组件。
output 与之相反#xff0c;好比火箭#xff0c;向上传递数据或事件。ou…1. Output
input 好比重力向下传递数据list 传给 detailsmart 组件传给 dumb 组件父组件传给子组件。input 顾名思义输入数据给组件。
output 与之相反好比火箭向上传递数据或事件。output 顾名思义就是将某些数据发送出去。 语法
Output()
remove: EventEmitterany new EventEmitter();onRemove() {// 通过 emit 关键字向上发送事件this.remove.emit(this.detail);
}handleRemove 函数里使用了 filter是为了避免直接修改 state。 2. 实现删除功能的代码举例
2.1 pokemon-detail.component.html
在 pokemon-detail.component.html 中增加一个用来删除 Pokemon 的 button
trtd classpokemon-td [class.cool-bool]detail.isCool{{ detail.id }} : {{ detail.name }}{{ detail.isCool true ? is COOL : is NOT COOL }}/td!-- add a button --button (click)onRemove()Remove Pokemon/button
/tr2.2 pokemon-detail.component.ts
在 pokemon-detail.component.ts 中增加 Output, 以及 onRemove
import { Component, EventEmitter, Input, OnInit, Output } from angular/core;
import { Pokemon } from src/app/models/pokemon;Component({selector: app-pokemon-detail,templateUrl: ./pokemon-detail.component.html,styleUrls: [./pokemon-detail.component.css],
})
export class PokemonDetailComponent implements OnInit {Input()detail!: Pokemon; // 新增代码Output()remove: EventEmitterany new EventEmitter();constructor() {}ngOnInit(): void {}// 新增代码onRemove() {this.remove.emit(this.detail)}
}2.3 pokemon-list.component.html
修改 pokemon-list.component.html, 增加 (remove)handleRemove($event):
tabletheadthName/ththIndex/th/theadtbodyapp-pokemon-detail*ngForlet pokemon of pokemons[detail]pokemon(remove)handleRemove($event)/app-pokemon-detail/tbody
/table2.4 pokemon-list.component.ts
在此文件中实现删除功能的相应代码
import { Component, OnInit } from angular/core;
import { Pokemon } from src/app/models/pokemon;Component({selector: app-pokemon-list,templateUrl: ./pokemon-list.component.html,styleUrls: [./pokemon-list.component.css],
})
export class PokemonListComponent implements OnInit {pokemons: Pokemon[] [// Pokemon: 精灵宝可梦{id: 1,name: pikachu, // 皮卡丘type: electric,isCool: false,isStylish: true,},{id: 2,name: squirtle, // 杰尼龟type: water,isCool: true,isStylish: true,},{id: 3,name: charmander, // 小火龙type: fire,isCool: true,isStylish: false,},];constructor() {}// 新增代码实现删除功能handleRemove(event: Pokemon) {// 要避免改变 state这里不能直接删除 pokemons 数组元素因此使用 filterthis.pokemons this.pokemons.filter((pokemon: Pokemon) {return pokemon.id ! event.id;});}ngOnInit(): void {}
}运行 ng serve, 点击相应 button可实现删除功能 Angular For Beginners
