响应组件事件

Angular 2中的事件与它们在Angular 1.x中的工作类似。最大的变化是模板语法。

  1. import {Component} from '@angular/core';
  3. @Component({
  4.   selector: 'rio-counter',
  5.   template: `
  6.     <div>
  7.       <p>Count: {{num}}</p>
  8.       <button (click)="increment()">Increment</button>
  9.     </div>
  10.   `
  11. })
  12. export class CounterComponent {
  13.   num = 0;
  15.   increment() {
  16.     this.num++;
  17.   }
  18. }

View Example

要通过 outputs 从组件发送数据，请先定义outputs属性。它接受组件向其父组件公开的输出参数的列表。

app/counter.component.ts

  1. import { Component, EventEmitter, Input, Output } from '@angular/core';
  3. @Component({
  4.   selector: 'rio-counter',
  5.   templateUrl: 'app/counter.component.html'
  6. })
  7. export class CounterComponent {
  8.   @Input()  count = 0;
  9.   @Output() result = new EventEmitter<number>();
  11.   increment() {
  12.     this.count++;
  13.     this.result.emit(this.count);
  14.   }
  15. }

app/counter.component.html

  1. <div>
  2.   <p>Count: {{ count }}</p>
  3.   <button (click)="increment()">Increment</button>
  4. </div>

app/app.component.ts

  1. import { Component, OnChange } from '@angular/core';
  3. @Component({
  4.   selector: 'rio-app',
  5.   templateUrl: 'app/app.component.html'
  6. })
  7. export class AppComponent implements OnChange {
  8.   num = 0;
  9.   parentCount = 0;
  11.   ngOnChange(val: number) {
  12.     this.parentCount = val;
  13.   }
  14. }

app/app.component.html

  1. <div>
  2.   Parent Num: {{ num }}<br>
  3.   Parent Count: {{ parentCount }}
  4.   <rio-counter [count]="num" (result)="ngOnChange($event)">
  5.   </rio-counter>
  6. </div>

View Example

一组 input + output 绑定定义组件的公共API。在我们的模板中，我们使用 [方括号] 传递输入，使用（括号）来处理输出。