Angular 8: с помощью ViewChild получить результат метода от потомка к родителю после вызова этого метода в дочернем компоненте - PullRequest
Новая
       6

Angular 8: с помощью ViewChild получить результат метода от потомка к родителю после вызова этого метода в дочернем компоненте

0 голосов
/ 11 января 2020

В моем дочернем компоненте у меня есть две кнопки, подобные следующим:

child-component. html

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

In 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 после вызова соответствующего метода из дочернего компонента. Когда я пытаюсь получить это в родительском компоненте, используя ViewChild в AfterViewInit ловушке жизненного цикла, как показано ниже:

parent-component.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
  }
}

я могу не получаю эти данные от потомка.

Моя цель - получить эти данные после того, как метод, вызванный в потомке, после события нажатия кнопки там. И после получения мне нужно вызвать метод getValues() в родительском компоненте.

Как мне этого добиться?

1 Ответ

1 голос
/ 11 января 2020

Пример - Декоратор вывода

дочерний компонент: 

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