Angular2中@Input和@Output之间有什么区别

Question

我刚学习Angular2,我遇到了@Input和@Output.两者有什么区别.

Answer 1

@Input()是通过数据在该组件

class ChildComponent {
  @Input() data;
}

@Component({
  template: `<child [data]="parentData"></child>
})
class ParentComponent {
  parentData;
}

这ParentComponent是由@Input()财产将数据传递给孩子.该[data]名称与子组件中的属性相同.如果要使用与属性名称不同的名称,则可以使用@Input('diff-name')

@Output被发射的数据(事件)停止从部件

class ChildComponent {
  @Output() dataChange = new EventEmitter();

  click() {
    dataChange.emit('new Value');
  }
}

@Component({
  template: `<child (dataChange)="onDataChange($event)"></child>
})
class ParentComponent {

  onDataChange(event) {
    console.log(event);
  }
}

这里ChildComponent有一个@Output它发出的事件.父母正在侦听并将回调传递给(dataChange).现在每次子项发出一个事件时,将调用父回调来传递事件.