Angular 8：在子组件中调用方法后，使用ViewChild从子组件到父组件获取方法结果

在我的子组件中，我有两个按钮，如下所示：

child-component.html

在父组件中，在从子组件调用相应的方法之后，我需要接收firstItem和lastItem数据。当我尝试在AfterViewInit生命周期钩子中使用ViewChild在父组件中获取它时，如下所示：

父组件

我不能从孩子那里得到那个数据

我的目标是在那个儿的按钮点击事件之后在子按钮中调用方法之后接收这些数据。在接收之后，我需要调用父组件中的getValues方法

如何实现这一点？

示例- 子组件：

导出类ChildComponent实现OnInit，AfterViewInit{ 第一项：编号； 最后一项：编号； @Output firstItemChanged=新的EventEmitter； @输出lastItemChanged=新的EventEmitter； 建造师{ } 恩戈尼特{ } ngAfterViewInit:void{ } getFirstData{ 此.firstItem=1； this.firstItemChanged.emitthis.firstItem； } getLastData{ 这个。最后一项=10； this.firstItemChanged.emitthis.lastItem； } } 父组件html：

    <child-component (firstItemChanged)="handleFirstItemChanged($event)" (lastItemChanged)="handleLastItemChanged($event)"></child-component>

示例-行为主体 子组件：

界面状态{ 第一项：编号； 最后一项：编号； } 导出类子组件{ 状态=新行为主体{ 第一项：0， 最后一项：0 }; 构造函数{} 第一个按钮{ const newState=this.state.value； newState.firstItem=1； this.state.nextnewState； } 最后的按钮{ const newState=this.state.value； newState.lastItem=1； this.state.nextnewState； } } 父组件：

导出类ParentComponent实现AfterViewInit{ @viewChildComponent，{static:true}child:ChildComponent； ngAfterViewInit:void{ this.child.state.subscribestate=>{ //处理 }; } }

---

不要使用ViewChild。使用输出@对于每个输出，我需要分别发出每个事件。假设我有三个或四个方法调用，那么我必须发出三个或四个eventemitter。在子选择器中，我必须声明它们中的每一个。我试图忽略这一点。另一方面，当我使用ViewChild时，我可以在一行中获得整个组件。不，你不能。例如，您可以使用单个输出并发出{first:1}或{last:10}。当然，您也可以始终发出相同的未定义值，例如，然后使用ViewChild从子组件获取新状态，但您仍然不知道该状态中刚刚更改了什么。我知道我可以使用输出装饰器。但也就是说，将来我需要发出更多的事件，然后我需要一次又一次地分别声明每个事件。但是使用ViewChild，我可以在一行中获得整个组件。请使用ViewChild为我提供此问题的解决方案。您可以创建一个BehaviorSubject，当您单击按钮时，它将发出新的值，并在父组件中订阅它。我添加了一个使用该方法的示例。这两种方法的不同之处在于，您不能将@Output用于BehaviorSubject，并且该EventEmitter没有初始值。如果需要，那么您应该使用Zepa的第二种方法。假设EventEmitter子类Subject，您可以将state对象与EventEmitter和@Output一起使用，因此您只有一个。就我个人而言，我会走这条路，因为它是由框架提出的，并且没有紧密耦合。

export class ChildComponent implements OnInit, AfterViewInit {
  firstItem: number;
  lastItem: number;

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
  }

  getFirstData() {
    this.firstItem = 1;
    return this.firstItem;
  }

  getLastData() {
    this.lastItem= 10;
    return this.lastItem;
  }

}

export class ParentComponent implements OnInit, AfterViewInit {
  @ViewChild(ChildComponent, {static: true}) child: ChildComponent;

  first: number;
  last: number;

  ngOnInit() {
  }

  ngAfterViewInit() {

    console.log('first value ', this.child.getFirstData());
    console.log('last value ', this.child.getLastData());

  }

  getValues(): void {
    // some operations heer
  }
}

    <child-component (firstItemChanged)="handleFirstItemChanged($event)" (lastItemChanged)="handleLastItemChanged($event)"></child-component>