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).现在每次子项发出一个事件时,将调用父回调来传递事件.