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

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

компонент 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 но я точно не понимаю, как его использовать и как вызвать эту функцию, может ли кто-нибудь помочь?

70
angular angular2-components

5 ответов

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

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

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

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

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

@component({
  selector:'parent',
  template: `<com1 #com1></com1><com2 (myEvent)="com1.function1()"></com2>`
)
export class com2{
}

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

71

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

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

html-файл componentTwo

<button (click)="callMe()">click</button>
26

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

см. этот документ для получения более подробной информации:

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

<div>
  <com1 #com1>...</com1>
  <com2 [com1ref]="com1">...</com2>
</div>

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

@Component({
  selector:'com2'
})
export class com2{
  @Input()
  com1ref:com1;

  function2(){
    // i want to call function 1 from com1 here
    this.com1ref.function1();
  }
}
24

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

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

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

@Component(
  selector:'com2',
  template: `<com1 #component1></com1>`
)
export class Component2{
  @ViewChild("component1") component1: Component1;

  function2(){
    this.component1.function1();
  }
}
13
  • допустим, 1-й компонент-DbstatsMainComponent
  • 2-й компонент DbstatsGraphComponent.
  • 1-й компонент, вызывающий метод 2-го компонента-displayTableGraph ()

<button (click)="dbgraph.displayTableGraph()">Graph</button> <dbstats-graph #dbgraph></dbstats-graph>

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

1