Jak wywołać funkcję innego komponentu w angular2

Mam dwa komponenty jak poniżej i chcę wywołać funkcję z innego komponentu. Oba komponenty są włączone do trzeciego komponentu macierzystego za pomocą dyrektywy.

Składnik 1: 

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

Składnik 2: 

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

Próbowałem używać @input i @output ale nie rozumiem dokładnie jak z niego korzystać i jak wywołać tę funkcję, Czy ktoś może pomóc?

Author: Scott Mikutsky, 2016-06-02
Source

5 answers

Jeśli com1 i com2 są rodzeństwem, możesz użyć 

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

Com2 emituje Zdarzenie za pomocą EventEmitter 

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

Tutaj komponent nadrzędny dodaje powiązanie zdarzeń do nasłuchu zdarzeń myEvent, a następnie wywołuje com1.function1(), gdy takie zdarzenie się wydarzy. {[6] } jest zmienną szablonową, która pozwala odwoływać się do tego elementu z innego miejsca w szablonie. Używamy tego, aby function1() stał się obsługą zdarzenia dla myEvent z com2: 

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

Dla innych opcji komunikacji między komponentami Zobacz też https://angular.io/docs/ts/latest/cookbook/component-communication.html

 71
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-02 09:29:59

Możesz uzyskać dostęp do metody komponentu pierwszego z komponentu drugiego..

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 file 

<button (click)="callMe()">click</button>
 26
Author: Jayantha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-15 13:32:05

Zależy to od relacji między komponentami (rodzic / dziecko), ale najlepszym / ogólnym sposobem tworzenia komponentów komunikacyjnych jest użycie usługi współdzielonej.

Zobacz ten dokument po więcej szczegółów:

To powiedziawszy, możesz użyć następującego przykładu com1 do com2: 

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

W com2 można użyć "po": {]} 

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

  function2(){
    // i want to call function 1 from com1 here
    this.com1ref.function1();
  }
}
 24
Author: Thierry Templier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-02 09:38:33

Składnik 1 (dziecko): 

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

Składnik 2 (rodzic): 

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

  function2(){
    this.component1.function1();
  }
}
 13
Author: Ihor Khomiak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-20 12:45:05
  • powiedzmy, że 1. komponent to DbstatsMainComponent
  • 2. komponent DbstatsGraphComponent.
  • 1. komponent wywołujący metodę 2. komponentu-displayTableGraph ()

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

Zwróć uwagę na zmienną lokalną # dbgraph na komponencie potomnym, której rodzic może użyć, aby uzyskać dostęp do swoich metod (dbgraph.displayTableGraph ()).

 1
Author: RAHUL KUMAR,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-02 16:13:34