angular @Input() 和 @Output()

標籤：cli   angular   delete   對象   button   component   組件   rom   []   

建立 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

<div>  <ul>    <li *ngFor="let stu of stus" (click)="selected(stu)"> {{stu.id}} -- {{stu.name}} -- {{stu.age}} </li>  </ul></div><app-child [stu]="stu" (deleteEvent)="deleteStu($event)"></app-child>

@Input() 很簡單，就是將父組件的資料給子組件的一個屬性；
@Output() 子組件建立一個 EventEmitter， 子組件的操作會觸發EventEmitter ，然後將這個 EventEmitter 對象賦值給 父組件的一個 method ，改方法會拿到EventEmitter對象給的參數，然後進行處理；

angular @Input() 和 @Output()