2016-10-01 119 views
0

你好,我有一個關於兩個文件之間傳遞數據的問題。 我想知道如何通過@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{ 


} 

回答

0

您可以創建共享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{ 


} 
+0

我該怎麼辦使用服務將file1中的數據分配到file2中而不創建http請求?如果我添加標記,那麼我也將採用該模板。我只需要傳遞數據。 – Tony

+0

你解決了嗎? – ulou

+0

不,我沒有得到getData()方法中的內容,但我無法從方法外部打印它。我打開了一個新線程http://stackoverflow.com/questions/39822057/angular2-passing-data-over-servicestwo-components/39822467#39822467 – Tony

0

爲此目的,您可以使用services。服務是一個可注入的單例,可以傳遞給構造函數中的組件。然後,兩個組件都通過服務進行通信。

你會官方Angular2文檔

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

還有一個現場演示,爲plunkr中找到一個很好的和精心製作的介紹services

相關問題