Question

我有一个发出数字的子组件：

this.number.emit(3);

在父组件中，我听它：

<parent>
  <child (number)="$event"></child>
</parent>

在父类中，如何将子组件中的EventEmitter与父组件中的observable组合？

this.apiService.getSomeHTTPRequest()
    .combineLatest(--- ??? combine with child event emitter ??? ---)

Answer 1

您必须在父组件中手动创建Subject。您需要使用发出的事件中的数据提供此主题，并在combineLatest方法中使用它。实现将如下所示：

import Subject from 'rxjs/Subject'
@Component({
    // Forward events from the child component to the numberChanges subject.
    template: `<child (number)="numberChanges.next($event)"></child>`
})
class Parent {
    numberChanges = new Subject<number>()
    // Assuming you create the stream in onInit method.
    ngOnInit() {
         const stream = this.apiService.getSomeHTTPRequest()
             // Combine the numberChanges stream.
             .combineLatest(this.numberChanges)
    }
}

Answer 2

尝试以下，

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <my-child (number)="childNumber.next($event)" ></my-child>
  `
})
export class AppComponent {
  name = 'Angular';
  childNumber: Subject<any>= new Subject<any>();

  someAPI = Observable.interval(2000);
  combined = Observable.combineLatest(this.childNumber,this.someAPI);

  constructor(){
    this.combined.subscribe(latestVals => console.log(latestVals));
  }
}


@Component({
  selector: 'my-child',
  template: `<h3>Child Component</h3>`
})
export class ChildComponent { 
  @Output() number: EventEmitter<any> = new EventEmitter<any>();

  constructor(){
    Observable.interval(1000).subscribe(num => {
      this.number.emit(num);
    });
  }
}

检查Plunker !!

希望这会有所帮助!!

Answer 3

由于每个EventEmitter实际上都是一个Observable（准确地说是Subject），因此您可以订阅它（或将其与其他可观察对象结合使用）。

您应该获得子组件：

@ViewChild(ChildComponent, { static: true }) child: ChildComponent;

然后，您可以订阅（或合并）孩子的EventEmitter：

child.number.subscribe();

使用此技术，您无需侦听模板中的事件：

<parent>
  <child></child>
</parent>

StackBlitz

如何在子组件中使用具有observable的EventEmitter（angular 2）

3 个答案: