Angular 8：在子組件中調用該方法后，使用 ViewChild 獲取從子組件到父組件的方法結果

Question

在我的子組件中，我有兩個按鈕，如下所示：

子組件.html

<div>
   <button (click)="getFirstData()">First</button>
   <button (click)="getLastData()" >Last</button>
</div>

在child-component.ts 中：

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;
  }

}

在父組件中，我需要在從子組件調用相應方法后接收firstItem和lastItem數據。 當我嘗試在AfterViewInit生命周期鈎子中使用ViewChild在父組件中獲取它時，如下所示：

父組件.ts

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 中調用方法之后接收這些數據。 接收后，我需要調用父組件中的getValues()方法。

我怎樣才能做到這一點？

Answer 1

示例 - 輸出裝飾器

子組件：

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

  @Output() firstItemChanged = new EventEmitter<number>();
  @Output() lastItemChanged = new EventEmitter<number>();

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit(): void {
  }

  getFirstData() {
    this.firstItem = 1;
    this.firstItemChanged.emit(this.firstItem);
  }

  getLastData() {
    this.lastItem= 10;
    this.firstItemChanged.emit(this.lastItem);
  }

}

父組件html：

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

父組件：

export class ParentComponent {

  handleFirstItemChanged(value: number): void {
    // handle event
  }

  handleLastItemChanged(value: number): void {
    // handle event
  }
}

示例 - BehaviorSubject

子組件：

interface State {
  firstItem: number;
  lastItem: number;
}

export class ChildComponent {

  state = new BehaviorSubject<State>({
    firstItem: 0,
    lastItem: 0
  });

  constructor() { }

  firstButtonClicked() {
    const newState = this.state.value;
    newState.firstItem = 1;
    this.state.next(newState);
  }

  lastButtonClicked() {
    const newState = this.state.value;
    newState.lastItem = 1;
    this.state.next(newState);
  }
}

父組件：

export class ParentComponent implements AfterViewInit {

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

  ngAfterViewInit(): void {
    this.child.state.subscribe(state => {
      // handle
    });
  }
}