Передача значения функции в другом компоненте

Question

У меня есть 2 компонента. одна - страница, а другая - переход, который скользит по странице. Я хочу передать значение функции в компоненте transitionComponent, но не могу понять это. @input лучший способ сделать это или есть другой способ для прямого вызова функции в другом компоненте?

Отредактированный с примером кода - я похудела основной компонент просто сосредоточиться на прохождении этого значения:

родительский компонент:

  import {Component, ElementRef, OnInit} from '@angular/core'; 
      import {TransitionComponent} from '../../PageLoader/TransitionComponent'; 


      @Component({ 
       selector: 'home', 
       templateUrl: './app/components/Homepage/list/index.html', 
       directives: [ TransitionComponent] 
      }) 


      export class HomepageListComponent implements OnInit { 

       transitionState: string; 

        constructor() { 
         this.transitionState = this.transitionState; 
        } 


        ngOnInit() { 

         this.transitionState = "test"; 

        } 
      } 

Детский компонент:

  import {Component, Input, OnInit} from '@angular/core'; 

      @Component({ 
      selector: 'the-loader', 
      template: `<div class="loader"></div>`, 
      styles: [` 
      .loader { 
      background-color: black; 
      height: 100%; 
      width:100%; 
      position:absolute; 
      top:0; 
      left:0; 
      z-index:99999; 
      } 
      `] 
      }) 




      export class TransitionComponent { 

       @Input() transitionState; 

       transitionStatus(transitionState) { 
        alert(transitionState); 
       } 


      } 

Answer 1

Если у обоих компонентов есть сценарий parent-child, вы можете обмениваться данными с Parent=>Child и Child => Parent с использованием @Input, @ViewChild, EventEmitter, Injector и так далее ...

Если оба компонента не имеют никакого отношения друг с другом, вы можете думать, иметь service (sharedService)

Обновление:

Я думаю, что вы хотите вызвать дочернюю функцию от родителя и передать данные одновременно. Для этого вы можете использовать @ViewChild API, показанный здесь.
ПРИМЕЧАНИЕ: вам не нужно использовать @Input.

https://plnkr.co/edit/VaddcH?p=preview

с дистанционным управлением - https://plnkr.co/edit/iRLGfgO4zwUXDXzw9ot7?p=preview

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; // <---ViewChild added    
import {TransitionComponent} from '../../PageLoader/TransitionComponent';  

      @Component({ 
       selector: 'home', 
       templateUrl: './app/components/Homepage/list/index.html', 
       directives: [ TransitionComponent] 
      }) 


      export class HomepageListComponent{  
       @ViewChild(TransitionComponent) vc:TransitionComponent; 
       ngAfterViewInit() 
       { 
        this.vc.transitionStatus('Angular2'); 
       } 
      } 

---

 export class TransitionComponent { 
      transitionStatus(transitionState:string) { 
       alert(transitionState); 
      } 
     } 

Answer 2

В родитель-ребенок relatinship вы можете использовать:

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

@ Ввод: позволяет передавать значение от родителя к дочернему.

В вашем случае я бы использовать @input aprouch