了解一下angular中的@Input()和@Output()

相关教程推荐：angularjs（视频教程）
创建 student class
就只有几个简单的属性（执行下面的属性可以快速生成）
ng generate class entity/student
export class student { id: number; name: string; age: number;}创建child component
ts
import { component, oninit, input, output, eventemitter } from '@angular/core';import { student } from '../entity/student';@component({ selector: 'app-child', templateurl: './child.component.html', styleurls: ['./child.component.css']})export class childcomponent implements oninit { @input() stu: student; @output() deleteevent = new eventemitter<number>(); constructor() { } ngoninit() { } delete(id) { this.stu = null; this.deleteevent.emit(id); }}html
<p *ngif="stu"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} <button (click)="delete(stu.id)">delete</button></p>修改 app.component
ts
import { component } from '@angular/core';import { student } from './entity/student';@component({ selector: 'app-root', templateurl: './app.component.html', styleurls: ['./app.component.css']})export class appcomponent { stus: student[] = [ {id: 1, name: '里斯', age: 3}, {id: 2, name: '里斯2', age: 4}, {id: 3, name: '里斯3', age: 5}, ]; stu: student; constructor() { } selected(stu) { this.stu = stu; } deletestu(id: number) { this.stus.foreach((val, index) => { if ( val.id === id) { this.stus.splice(index, 1); return; } }); }}html
<p> <ul> <li *ngfor="let stu of stus" (click)="selected(stu)"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} </li> </ul></p><app-child [stu]="stu" (deleteevent)="deletestu($event)"></app-child>@input() 很简单，就是将父组件的数据给子组件的一个属性；
@output() 子组件创建一个 eventemitter， 子组件的操作会触发eventemitter ，然后将这个 eventemitter 对象赋值给 父组件的一个 method ，改方法会拿到eventemitter对象给的参数，然后进行处理；
更多编程相关知识，可访问：编程教学！！

如何有效掌握域名注册流程？新手需要怎么操作？
服务器怎么做安全防护
租用云服务器实现科学上网
电子商务： 京东网盈利？
云服务器提供商价格
阿里云服务器怎么设置https
快云服务器续费
云服务器怎么建立社区