Question

今天我开始学习Angular2，我可以清楚地看到为什么＆＃39;输入属性＆＃39;指令是必需的，因为它使父 - >儿童交流要容易得多，但我不完全理解“输出属性”的用例＆＃39;在指令中。有人可以解释一下吗？

Answer 1

这是在Angular2中实现自定义事件的方法。子组件可以触发父级可以订阅的事件。

想象一下，子组件可以触发someEvent事件。事件发生时，您可以使用以下语法（(event-name)="..."）调用doSomething方法：

<child (someEvent)="doSomething($event)"></child>

$event包含触发事件时提供的值。 Imy示例$event对应'some value'。

子组件只需要为此定义输出：

@Component({
  selector: 'child',
  template: `
    (...)
  `
})
export class ChildComponent {
  @Output()
  someEvent:EventEmitter<string> = new EventEmitter();

  emitCustomEvent() {
    this.someEvent.emit('some value');
  }
}

例如，可以在点击内的子组件中调用emitEvent方法：

@Component({
  selector: 'child',
  template: `
    <div (click)="emitCustomEvent()">Emit custom event</div>
  `
})
export class ChildComponent {
  (...)
}

输出属性＆＃39;的目的是什么？在Angular2指令？

1 个答案: