javascript - 更改为使用自定义下拉列表后无法看到父变量？

Question

我有一个有 2 个直接子组件的组件，它们都使用 event父级中保存的变量。但是，在更改使用下拉列表的组件之一后，使用 <select>到自定义动画下拉菜单...我再也看不到 event尽管使用了几乎相同的代码，但在这个 child 中。

Parent.ts

event: IEvent;

constructor(private eventService: EventService) {
}

ngOnInit() {
  this.subToEventService();
}

subToEventService() {
  this.eventService.eventSubject
    .subscribe(res => {
      this.event = res;
  }
}

child 1(可以看到事件)

export class ChildOne extends ParentComponent implements OnInit {
  constructor(eventService: EventService) {
    super(eventService);
  }

  ngOnInit() {
    console.log(this.event);
  }

}

子级 2(看不到事件)

export class ChildTwo extends ParentComponent implements OnInit {
  @ViewChild('dropdown') dropdown: ElementRef;

  expanded = false;

  constructor(eventService: EventService) {
    super(eventService);
  }

  ngOnInit() {
    console.log(this.event);
  }

  toggleDropdown() {
    const dropdown = this.dropdown.nativeElement;

    if (this.expanded) {
      TweenMax.to(dropdown, 0.5, {...});
    } else {
      TweenMax.to(dropdown, 0.5, {...});
    }
    this.expanded = !this.expanded;
  }

  determineStyle() {
    const style = this.dropdown.nativeElement.style;
    style.height = this.expanded ? 376 : 34;
  }
}

Answer 1

在两个子组件中，您都将重写 ParentComponent 类的 ngOnInit 方法。

您需要在两个子 ngOnInit 上调用 super.ngOnInit(); 来订阅这些组件内的主题。