Question

嗨，我有一个问题，如主题： My Parent组件将值传递给他的子组件，如下所示：

<em-event-list  [sumListEvents]="sumListEvents"></em-event-list>

因此当值 sumListEvents 更改时，我想订阅该值以从Service调用该函数。这就是我的子组件的外观：

 @Input() sumListEvents: Observable<number>;
 private events: Event[] = [];

 constructor(private dataService: EventListService) { 
    let loadSubscription = this.sumListEvents.subscribe(
      value => {
        this.events = this.dataService.showEvents(value)
      }
    )
  }

但是我在 sumListEvents 中的订阅Cannot read property 'subscribe' of undefined收到错误。有什么想法吗？

Answer 1

您需要时

sumListEvents不可用。您只能在*ngIf可用时使用sumListEvents订阅。

<em-event-list *ngIf [sumListEvents]="sumListEvents"></em-event-list>

这可行，但将事件传递给孩子并在孩子中订阅可能不是最佳做法。

您可以参考https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components了解将异步数据传递给子组件的其他方法。

Answer 2

更好的方法是使用async管道和setter。

<em-event-list *ngIf [sumList]="sumListEvents$ | async"></em-event-list>

 @Input() set sumList(value) {
   if(value) {
     this.events = this.dataService.showEvents(value);
   }      
 }

 private events: Event[] = [];

 constructor(private dataService: EventListService) { }

如何订阅Input属性来调出函数Angular 2 +

2 个答案: