コンポーネントから別のコンポーネントにデータを渡すコンポーネント2つのファイル

Question

こんにちは私は、2つのコンポーネントで2つのコンポーネント間でデータを渡すことについて質問します。 @Inputを使ってデータを渡す方法が不思議でした。誰かがデータを渡す必要があるという考えを持っていますか？

file1.ts 
import { Component } from "@angular/core"; 
@Component({ 
    selector: "search", 
    templateUrl: '<div>Hello{{testData}}</div>' 
}) 

export class File1Component{ 
public testData = "Hello"; 

} 

file2.ts 
import { Component } from "@angular/core"; 
@Component({ 
    selector: "profile", 
    templateUrl: '<div>Hello</div>' 
}) 

export class File2Component{ 


} 

Answer 1

あなたはserviceを共有したり、そのようにそれを扱う作成することができます。

file1.component.ts

import { Component } from "@angular/core"; 
@Component({ 
    selector: "search", 
    templateUrl: ' 
        <div>Hello{{testData}}</div>' 
}) 

export class File1Component{ 
public testData = "Hello"; 

getTestData(){ 
    return this.testData; 
} 

} 

file2.component.ts

import { Component, Input } from "@angular/core"; 
@Component({ 
    selector: "profile", 
    templateUrl: '<div>Hello</div>' 
}) 

export class File2Component{ 
    @Input() inputData: any; 

} 

app.component.ts

import { Component } from "@angular/core"; 
@Component({ 
    selector: "app", 
    templateUrl:'<search #varSearch></search> 
       <profile [inputData]="varSearch.getTestData()"></profile>' 
}) 

export class File2Component{ 


} 

Answer 2

この目的でservicesを使用できます。サービスは、コンストラクタ内のコンポーネントに渡すことができる、注入可能なシングルトンです。両方のコンポーネントはサービスを介して通信します。

あなたはplunkrとしてライブデモもあり

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

公式Angular2ドキュメントにservicesに良いと精巧な紹介を見つけることができます。