Angular: вызов функции в одном компоненте с событиями в другом компоненте - PullRequest
Новая
       26

Angular: вызов функции в одном компоненте с событиями в другом компоненте

0 голосов
/ 19 сентября 2018

Работая с Angular6, допустим, у меня есть 2 дочерних компонента A, B, которые оба являются частью родительского компонента P. Я хочу использовать ввод формы для компонента A, поэтому после щелчка значение строки будет передаваться ивызвать функцию на компоненте B. возможно, что-то вроде этого: 

functionOnB(valueFromA: string) { //some code here; }

это вообще возможно?

Я успешно передал данные между компонентами с помощью EventEmitter из angular, но так ли это?можно вызывать функции с этими данными, а не просто передавать необработанную информацию?

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

Да, возможно, вы можете использовать декоратор @Input для передачи ссылки на компонент другому компоненту.Таким образом, вы можете вызывать методы ComponentB из ComponentA.

Например, внутри FirstComponent вы объявляете переменную экземпляра типа SecondComponent: 

 @Input()
 second: SecondComponent;

И в своем родительском HTML вы передаете ссылку на компонент: 

 <app-first [second]="second"></app-first>
 <app-second #second></app-second>

Поваренная книга взаимодействия компонентов

Вот рабочий пример: Пример взаимодействия компонентов

0 голосов
/ 19 сентября 2018

Общая служба может использоваться для запуска события / функции из другого компонента.Например: событие click ComponentA вызовет метод службы.Затем этот сервисный метод должен генерировать другое событие.Затем ComponentB должен подписаться на источник событий службы.Пример кода: ChildA (HTML): 

<button (click)="onClick()"></button>

Контроллер ChildA (TS): 

  onClick() {
    this.commonService.AClicked('Component A is clicked!!');
  }

Общая служба (TS): 

import { Injectable, EventEmitter, Output } from '@angular/core';

@Output() aClickedEvent = new EventEmitter<string>();

AClicked(msg: string) {
  this.aClickedEvent.emit(msg);
}

Контроллер ChildB (TS): 

  ngOnInit() {
    this.commonService.aClickedEvent
    .subscribe((data:string) => {
      console.log('Event message from Component A: ' + data);
    });
  }
...