Angular2：將數據傳遞給子組件

我有一個簡單的應用程序，其中有一個主要組件和一個子組件。主要組件接受將由子組件使用的數據值。所以我這樣定義index.html中 -Angular2：將數據傳遞給子組件

<my-app [mydata]="'Some sample data'"> 
    loading... 
    </my-app>

而在我的主要組成部分，我定義輸入屬性「MYDATA」 -

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <child-app [data]="mydata"></child-app> 
    </div> 
    `, 
    directives: [childApp], 
    inputs: ['mydata'] 
}) 
export class App { 
    mydata: string; 

    constructor() { 
    this.name = 'Angular2' 
    } 
}

在主要成分的觀點我已經使用了孩子組件並通過了MYDATA屬性，並將其綁定到子組件中的「數據」屬性 -

<child-app [data]="mydata"></child-app>

這裏是我的孩子組成部分 -

@Component({ 
    selector: 'child-app', 
    providers: [], 
    template: ` 
    <div> 
     <h2>This is my data: {{data}}</h2> 
    </div> 
    `, 
    directives: [childApp], 
    inputs: ['data'] 
}) 
export class childApp { 
    data: string; 

    constructor() { 
    this.name = 'Angular2' 
    } 
}

不幸的是，最終的輸出並沒有顯示我在index.html中傳遞的'一些示例數據'。

有關示例代碼，請參見此plunk。

有關如何將數據傳遞給子組件的任何建議？

來源

2016-02-09 tyrion

[Angular2：得到母路由器數據]的可能的複製（HTTP：//計算器。 com/questions/35299238/angular2-get-parent-router-data） –

@Input()目前在根組件上不受支持（AppComponent）。

也https://github.com/angular/angular/issues/1858

見作爲一種變通方法，您可以使用

constructor(ref:ElementRef) { 
    ref.nativeElement.getAttribute('mydata'); 
} 


<my-app mydata="Some sample data"> 
    loading... 
</my-app>

（只允許字符串）

來源

2016-02-09 11:37:58

謝謝，我嘗試了這個以及它的合理工作。 – tyrion

Angular2：將數據傳遞給子組件

回答

相關問題