Thử Nghiệm Với Angular 2 Phần 8: Component Event Với EventEmitter Và @Output

Giới thiệu

Sau khi tìm hiểu bài học Truyền Dữ Liệu Cho Component Với @Input trong series Thử Nghiệm Với Angular 2, chúng ta đã biết cách để Component có thể nhận dữ liệu đầu vào. Bài học - Component Event Với EventEmitter Và @Output - sẽ giới thiệu cách để Component phát sinh Event để tương tác từ Component con với Component cha.

@Output sử dụng như thế nào?

Tương tự như @Input, việc sử dụng @Output cũng rất dễ dàng.

Bạn cần đặt một tên cho event hoặc có thể thêm alias, sau đó gán nó với @Output decorator và một phép gán cho một đối tượng thuộc EventEmitter như sau:

switches.component.ts

import { 
  Component, 
  OnInit, 
  Input, 
  Output, 
  EventEmitter 
} from '@angular/core';

@Component({
  selector: 'tp-switches',
  templateUrl: './switches.component.html',
  styleUrls: ['./switches.component.scss']
})
export class SwitchesComponent implements OnInit {
  @Input() checked = false;
  @Output('checkedChange') change = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }
}

Khi có một hành động nào đó xảy ra, bạn sẽ kích hoạt event đó và trả về kèm theo một giá trị có thể là kiểu primitive hoặc các kiểu phức hợp như object, array,…

...

export class SwitchesComponent implements OnInit {
  // ...
  emitChangeValue(event) {
    this.change.emit(event.target.checked);
  }
}

switches.component.html

<label class="tp-toggle tp-toggle--round tp-toggle--flat">
  <input type="checkbox"
    class="tp-toggle__checkbox"
    [checked]="checked"
    (change)="emitChangeValue($event)"/>
  <span class="tp-toggle__icon"></span>
</label>

Listener event ở Component cha như thế nào?

Ở Component cha, bạn lắng nghe event như các event thông thường được bao đóng bởi cặp dấu ().

contact-list.component.html

<tp-switches [checked]="contact.avatar?.round"
  (checkedChange)="switchesValueChange($event, i)">
</tp-switches>

contact-list.component.ts

// ...

export class ContactListComponent {
  // ...
  switchesValueChange(event: boolean, index: number) {
    this.contacts[index].avatar.round = event;
  }
}

Sử dụng outputs array trong @Component() để thay thế cho việc dùng @Output.

Lưu ý: cách này thường không được khuyến cáo sử dụng như @Output.

switches.component.ts

import { 
  Component, 
  OnInit, 
  Input, 
  Output, 
  EventEmitter 
} from '@angular/core';

@Component({
  selector: 'tp-switches',
  templateUrl: './switches.component.html',
  styleUrls: ['./switches.component.scss'],
  outputs: ['change:checkedChange']
})
export class SwitchesComponent implements OnInit {
  @Input() checked = false;
  public change = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }
  emitChangeValue(event) {
    this.change.emit(event.target.checked);
  }
}

Lưu ý: alias sẽ có thứ tự internalEvent:externalEvent ví dụ như change:checkedChange.

Video bài học

Tham khảo

Documentation: https://angular.io/docs/ts/latest/cookbook/component-communication.html

Source code các bạn lấy theo branch để theo dõi: https://github.com/tieppt/try-angular/tree/lesson-8