相关教程推荐：angularjs（视频教程）
创建 Student class
就只有几个简单的属性（执行下面的属性可以快速生成）ng generate class entity/student
export class Student {
id: number;
name: string;
age: number;
}创建child component
ts
贞龙网店商城电子商务系统java版
下载
BIZOSS-B2C是脱胎于贞龙B2B大型平台的网上商城系统、网上商店系统、网上购物系统的企业级B2C电子商务解决方案。系统设置：这里包含了网店的常用功能和全局配置的开关。包括 商店设置 、支付方式和配送方式 、邮件服务器设置、地区列表、友情链接、自定义导航栏、站点地图。商品管理：网店展示商品的核心。其中包括了 商品分类、商品类型、商品品牌、商品回收站、商品上下架等一些设置。促销管理：这个是我们网
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();
constructor() { }
ngOnInit() {
}
delete(id) {
this.stu = null;
this.deleteEvent.emit(id);
}
} html
{{stu.id}} -- {{stu.name}} -- {{stu.age}}
修改 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
- {{stu.id}} -- {{stu.name}} -- {{stu.age}}
@Input() 很简单，就是将父组件的数据给子组件的一个属性；@Output() 子组件创建一个 EventEmitter， 子组件的操作会触发EventEmitter ，然后将这个 EventEmitter 对象赋值给 父组件的一个 method ，改方法会拿到EventEmitter对象给的参数，然后进行处理；
更多编程相关知识，可访问：编程教学！！
