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

【问题标题】：Pass value to a function in a different Component将值传递给不同组件中的函数
【发布时间】：2016-10-10 09:29:54
【问题描述】：

我有 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);
                }


            }

【问题讨论】：

标签： angular angular2-template angular2-directives

【解决方案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);
            }
        }

【讨论】：

这是很棒的信息，还没有使用 viewchild、eventemitter 或 injector。我在上面添加了一些代码示例。很高兴能得到你的想法，因为我似乎无法理解如何使用 @input 传递字符串
感谢它看起来很棒，我正在使用 RC1，现在它给了我这个错误 TypeError: Cannot read property 'transitionStatus' of undefined
用 RC 更新了我的答案。
还有一件事，如果我想访问函数传递的值，让我们说模板 html 我将如何做到这一点.. 我正在尝试这个，但它没有输出它模板：@987654329 @,
transitionStatus(value){ this.someVar=value}; 在 html 中放入 {{someVar}}。就是这样。

【解决方案2】：

在亲子关系中，您可以使用：

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

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

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

【讨论】：

我似乎无法解决传递字符串的问题，我已经更新了上面的问题。如果您能看一下并给我一些指示，我将非常感激