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

Question

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

750 5

angular angular2-components

5 ответов:

Comments

Ничего не найдено.

Günter Zöchbauer · Accepted Answer · 2016-06-02 12:29:59

если 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 на 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

Jayantha · Accepted Answer · 2018-02-15 15:32:05

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

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>

Thierry Templier · Accepted Answer · 2016-06-02 12:38:33

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

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

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

как говорится, вы можете использовать следующее, чтобы предоставить экземпляр 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();
  }
}

Ihor Khomiak · Accepted Answer · 2018-03-20 14:45:05

компонент 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();
  }
}

RAHUL KUMAR · Accepted Answer · 2017-08-02 19:13:34

допустим, 1-й компонент является DbstatsMainComponent

2-й компонент DbstatsGraphComponent.

1-й компонент вызывает метод 2-го компонента-displayTableGraph ()

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

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