了解一下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對象給的參數，然后進行處理；