angular - Angular 2中的@Input和@Output有什么区别

Question

我刚开始学习 Angular2，我遇到了@Input 和@Output。两者有什么区别。

Answer 1

@Input()是将数据In传递给组件

class ChildComponent {
  @Input() data;
}

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

此处 ParentComponent 通过 @Input() 属性将数据传递给子组件。 [data] 与子组件中的 property 同名。如果您想使用与属性名称不同的名称，则可以使用 @Input('diff-name')

@Output 是从一个组件Out发出数据(事件)

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)。现在每次子级发出事件时，都会调用父级回调来传递事件。