将值传递给不同组件中的函数

Question

我有两个组件。一个是页面，另一个是在页面上滑动的过渡。我希望将值传递给 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

如果两个组件都有父子场景，您可以使用 @Input、@ViewChild、EventEmitter、Injector 从 Parent=>Child 和 Child => Parent 交换数据等等...

如果两个组件彼此没有任何关系，您可以考虑 service (sharedService)

更新：

我想你想要的是从父函数调用子函数并同时传递数据。为此，您可以使用此处显示的 @ViewChild API。
注意：您不需要使用@Input。

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

与 RC - 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

在亲子关系中可以使用：

ViewChild：当父组件需要访问其子组件的成员时，您可以例如从父组件调用子函数。

@Input：允许您将值从父级传递给子级。

在你的情况下我会使用@input aprouch

将值传递给不同组件中的函数

Pass value to a function in a different Component

angular2-directives

angular2-template

angular