创建 Student class相关教程推荐:angularjs(视频教程)
商都网站建设公司成都创新互联公司,商都网站设计制作,有大型网站制作公司丰富经验。已为商都超过千家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱,请找那个售后服务好的商都做网站的公司定做!
就只有几个简单的属性(执行下面的属性可以快速生成)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(); constructor() { } ngOnInit() { } delete(id) { this.stu = null; this.deleteEvent.emit(id); } }
html
修改 app.component{{stu.id}} -- {{stu.name}} -- {{stu.age}}
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
@Input()
很简单,就是将父组件的数据给子组件的一个属性;@Output()
子组件创建一个 EventEmitter, 子组件的操作会触发EventEmitter ,然后将这个 EventEmitter 对象赋值给 父组件的一个 method ,改方法会拿到EventEmitter对象给的参数,然后进行处理;
更多编程相关知识,可访问:编程教学!!
分享文章:了解一下angular中的@Input()和@Output()
本文地址:http://njwzjz.com/article/cpscgs.html