我刚学习Angular2,我遇到了@Input和@Output.两者有什么区别.
@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).现在每次子项发出一个事件时,将调用父回调来传递事件.