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将从组件中发出数据（事件） 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)。现在每次子项发出一个事件时，都会调用父回调来传递事件。

Answer 2

@Input和@Output装饰器是@ angular / core的一部分。

@Input装饰器将一个组件（子组件）内的属性绑定为从另一个组件（父组件）接收值。这是父母与孩子之间交流的一种方式。

@Output装饰器绑定组件的属性，以将数据从一个组件（子组件）发送到调用组件（父组件）。这是从子组件到父组件的一种通信方式。

供参考 [angular.io/guide/component-interaction]

Answer 3

对于AngularJS，我们可以按$ scope，父范围和根范围交换数据，但不能按Angular交换数据。我认为@Input非常容易，所以让我关注@Output。

通常，我们可以在任何组件之间使用服务同步数据。

import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class OneService {
  public oneSubject: Subject<Object> = new Subject<Object>();
}
//And we can use it in component
export class ComponentA {
  public dataFromService = null;
  constructor(private oneService: OneService) {
    this.oneService.subscribe(data => this.dataFromService = data);
  }
}
//We also can emit changes from other object
export class ComponetB {
  public oneData = false;
  constructor(private oneService: OneService) {
  }
  onChange() {
    this.oneService.next(this.oneData);
  }
}

因此，@ Output可简化父子组件之间的上述逻辑。

警告：这并不意味着@Output等于主题/订阅，仅对如何理解输出有所帮助。

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

3 个答案: