Как вызвать функцию других компонентов в угловом2

У меня есть два компонента, как показано ниже, и я хочу вызвать функцию из другого компонента. Оба компонента включены в третий родительский компонент, используя директиву.

Компонент 1:

@component( selector:'com1' ) export class com1{ function1(){...} } 

Компонент 2:

 @component( selector:'com2' ) export class com2{ function2(){... // i want to call function 1 from com1 here } } 

Я пробовал использовать @input и @output но я не понимаю, как его использовать и как вызвать эту функцию, может ли кто-нибудь помочь?

Если com1 и com2 являются братьями и сестрами, вы можете использовать

 @component({ selector:'com1', }) export class com1{ function1(){...} } 

com2 испускает событие с помощью EventEmitter

 @component({ selector:'com2', template: `` ) export class com2{ @Output() myEvent = new EventEmitter(); function2(){... this.myEvent.emit(null) } } 

Здесь родительский компонент добавляет привязку события для прослушивания событий myEvent а затем вызывает com1.function1() когда такое событие происходит. #com1 – это переменная шаблона, которая позволяет ссылаться на этот элемент из другого места в шаблоне. Мы используем это, чтобы сделать function1() обработчиком события для myEvent com2 :

 @component({ selector:'parent', template: `` ) export class com2{ } 

Для других вариантов связи между компонентами см. Также https://angular.io/docs/ts/latest/cookbook/component-communication.html.

Вы можете получить доступ к компоненту один из компонента 2.

ComponentOne

  ngOnInit() {} public testCall(){ alert("I am here.."); } 

componentTwo

 import { oneComponent } from '../one.component'; @Component({ providers:[oneComponent ], selector: 'app-two', templateUrl: ... } constructor(private comp: oneComponent ) { } public callMe(): void { this.comp.testCall(); } 

Файл компонента componentTwo html

  

Это зависит от отношения между вашими компонентами (родительский / дочерний), но лучший / общий способ создания компонентов связи – использовать общую службу.

Дополнительную информацию см. В этом документе:

При этом вы можете использовать следующее, чтобы предоставить экземпляр com1 в com2:

 
... ...

В com2 вы можете использовать следующее:

 @Component({ selector:'com2' }) export class com2{ @Input() com1ref:com1; function2(){ // i want to call function 1 from com1 here this.com1ref.function1(); } } 

Компонент 1 (ребенок):

 @Component( selector:'com1' ) export class Component1{ function1(){...} } 

Компонент 2 (родительский):

 @Component( selector:'com2', template: `` ) export class Component2{ @ViewChild("component1") component1: Component1; function2(){ this.component1.function1(); } } 
  • Скажем, 1-й компонент – DbstatsMainComponent
  • 2-й компонент DbstatsGraphComponent.
  • 1-й компонент, вызывающий метод 2-го компонента -displayTableGraph ()

Обратите внимание на локальную переменную #dbgraph на дочернем компоненте, которую родитель может использовать для доступа к своим методам (dbgraph.displayTableGraph ()).

  • Угловая, как получить многократное значение флажка?
  • Angular 4 Form FormArray Добавить кнопку, чтобы добавить или удалить строку ввода формы
  • Давайте будем гением компьютера.