了解一下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();
  constructor() { }
  ngOnInit() {
  }
  delete(id) {
    this.stu = null;
    this.deleteEvent.emit(id);
  }
}

html

  {{stu.id}} -- {{stu.name}} -- {{stu.age}}  delete

修改 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对象给的参数，然后进行处理；

更多编程相关知识，可访问：编程教学！！
当前文章：了解一下angular中的@Input()和@Output()
文章起源：http://bjjierui.cn/article/cpscgs.html