Angular 2 - 子组件如何与父组件对话？

Question

Angular 2 - 子组件如何与父组件对话？

我使用@input作为孩子的父母，工作正常。

我会用什么来做孩子的父母？

这是我得到的编译错误：

Answer 1

您可以使用@Output来触发子组件中的事件。父母可以注册处理它们。

这是一个示例

@Component({
  selector: 'child',
  (...)
})
export class ChildComponent {
  @Output()
  someEvent: EventEmitter;

  constructor() {
    this.someEvent = new EventEmitter();
  }

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

及其在父组件中的使用：

<child (some-event)="printValue($event)"></child>

仅供参考$event包含值'some value'。

您可以注意到Angular2支持此级别的双向绑定：

@Component({
  selector: 'child',
  (...)
})
export class ChildComponent {
  @Input()
  value:string
  @Output()
  valueChanges: EventEmitter;

  constructor() {
    this.valueChanges = new EventEmitter();
  }

  triggerUpdated() {
    this.valueChanges.emit('some value');
  }
}

及其在父组件中的使用：

<child [(value)]="someVar"></child>

修改

要从父组件调用方法，您需要将其注入到子组件中。

在此级别，您需要注意在导入中循环依赖，并且不支持类的提升（在创建之前使用类）。

有关详细信息，请参阅此答案：

• How can i access the values from parent component in angular2 using dependency injection?。

以下是一个示例：

@Component({
  selector: 'child',
  (...)
})
export class ChildComponent {
  constructor(@Inject(forwardRef(() => AppComponent)) parent:ParentComponent) {
    (...)
  }
}

这篇文章也可以给你一些提示：

• http://blog.thoughtram.io/angular/2015/04/09/developing-a-tabs-component-in-angular-2.html

亨利