Question

我正在尝试创建一个＆＃34; item-list＆＃34;用于托管表单的组件，该表单接收一些数据作为输入并向服务器发送http请求，当接收到响应时，我希望将新信息广播到应该作为＆＃34; list-component＆＃34;的父级。

这些是我的实体：

export class Parent {
    children: Array<Child>;
}

export class Child { ... }

服务层为每个请求返回完整的父实体，我们知道这不是最好的方法，但这是另一个问题。

该组件的实际工作方式如下：

export class ListItemComponent {

    ...

    @Input()
    parent: Parent;

    private output: EventEmmiter<Parent> = new EventEmmiter<Parent>();

    submit() {
        service.post(this.item).subscribe(
            data => {
                this.parent = data;
                this.output.emit(this.parent);
            }
        );
    }
}

除了ListComponent没有呈现新的Child之外，一切正常，但在我的测试中，我尝试在Child之外添加subscribe()的新实例}方法和调用output.emit()，这实际上运作良好，所以我猜这个问题与调用output.emit()内的subscribe()有某种关系。

欢迎任何帮助！

Answer 1

您可以尝试在Angular Zone中运行this.output.emit(this.parent);：

export class ListItemComponent {

  ...

  @Input()
  parent: Parent;

  private output: EventEmmiter<Parent> = new EventEmmiter<Parent>();

  constructor(private ngZone: NgZone) {}

  submit() {
      service.post(this.item).subscribe(
          data => {
              this.parent = data;
              this.ngZone.run(() => this.output.emit(this.parent));
          }
      );
  }

}

关于NgZone的一些文档： https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html#!#run-anchor

您可以在此处找到相关问题：https://github.com/angular/zone.js/issues/304

Angular 2 - 在subscribe方法中的EventEmmiter

1 个答案: