我被困在嘗試將屬性值傳遞到我的組件中。從我讀過的東西看，一切看起來都正確。但它仍然不起作用。我的測試值輸出到屏幕和控制檯爲空。 :(Angular 2 Component @Input not working

這是我的測試組件：

import {Component, Input} from 'angular2/angular2'; 

@Component({ 
    selector: 'TestCmp', 
    template: `Test Value : {{test}}` 
}) 

export class TestCmp { 

    @Input() test: string; 

    constructor() 
    { 
     console.log('This if the value for user-id: ' + this.test); 
    } 
}

這是我特意打電話從父頁面的組件

<TestCmp [test]='Blue32'></TestCmp>

當頁面呈現的測試值是空的。我只看到'Test Value：'

而不是'Test Value：Blue32'。

來源

2015-10-25 Zorthgo

不要在模板中使用駝峯名。 HTML不區分大小寫。 – alexpods

謝謝alex！我想我必須改變這種習慣。 ; 0） – Zorthgo

你有四件事情，我可以注意到：

你傳入輸入根組件，這是行不通的。
正如@alexpods提到的，您正在使用CamelCase。你不應該。
您正在傳遞一個表達式而不是通過[test]的字符串。這意味着angular2正在尋找名爲Blue32的變量，而不是傳遞原始字符串。
您正在使用構造函數。這將不起作用，它必須在~~視圖初始化後~~數據綁定屬性已被初始化（請參閱文檔OnInit）。

所以有一些修正它應該工作

實例更新到公測1

import {Component, Input} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 

@Component({ 
    selector : 'childcmp', 
    template: `Test Value : {{test}}` 
}) 
class ChildCmp { 
    @Input() test: string; 
    ngOnInit() { 
     console.log('This if the value for user-id: ' + this.test); 
    } 
} 

@Component({ 
    selector: 'testcmp', 
    template : `<childcmp [test]="'Blue32'"></childcmp>` 
    directives : [ChildCmp] 
}) 
export class TestCmp {} 

bootstrap(TestCmp);

看到這個plnkr作爲一個例子。

更新

我看到人們仍然達到這個答案，所以我已經更新了plnkr到Beta 1中，我的解釋糾正一點：你可以在ngAfterViewInit訪問輸入，但您可以更早地進入他們在ngOnInit的生命週期中。

來源

2015-10-25 12:27:09

感謝Eric的幫助！...這些都是非常好的一點。「AfterViewInit」將真正派上用場。 :) – Zorthgo

這個plunkr好像壞了，我在最新的Chrome/Firefox上只看到「測試值：」。 – aikeru

@aikeru謝謝你讓我知道。這真的很奇怪，plnkr幾乎看起來不像答案中的代碼。無論如何，我修好了:) –

我相信這裏的問題可能與頁面的生命週期有關。因爲在構造函數中this.test的值是null。但是，如果我將一個按鈕添加到鏈接到將值推送到控制檯的函數上（與我在構造函數中完成的操作相同），this.test實際上會有一個值。

來源

2015-10-25 05:48:02 Zorthgo

upvoted爲提示;但是解決方法是什麼？ – mok

這個角類可以使靜態屬性的伎倆： ElementRef https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

import {ElementRef} from 'angular2/core' 

constructor(elementRef: ElementRef) { 
    elementRef.nativeElement.getAttribute('api') 
}

來源

2016-01-25 09:25:09

這就是我一直在尋找的。你是查爾斯的救世主！ – gautam1168

但該文檔鏈接已過期。 – gautam1168

謝謝gautam1168。我解決了鏈接到期問題 –

也許看起來像一個錘，但你可以把輸入包裝這樣的對象上：

<TestCmp [test]='{color: 'Blue32'}'></TestCmp>

並改變你的班級

class ChildCmp { 
    @Input() test: any; 
    ngOnInit() { 
     console.log('This if the value for user-id: ' + this.test); 
    } 
}

來源

2016-07-23 22:51:55 jcmordan

你必須在子組件的頂部

import { Directive, Component, OnInit, Input } from '@angular/core';

來源

2016-12-31 08:49:30 Mukesh

當正在利用@input爲角interaction.It總是優選的方法從母體傳遞數據導入輸入這樣JSON對象中的孩子顯然不會被@Angular Team限制使用局部變量或靜態變量。

在上下文中訪問子組件的值使用ngOnInit（）{}角度生命鉤週期不管構造函數如何。

這會幫助你。乾杯。

來源

2017-07-15 08:18:29

分享了什麼工作對我來說：

添加一個輸入角4應用

假設我們有兩個部分組成：

parent-component
child-component

我們想從parent-component一些價值從parent-component.html傳遞到child-component即一個@Input到child-component.ts。下面是說明執行情況的例子：

parent-component.html看起來是這樣的：

<child-component [someInputValue]="someInputValue"></child-component>

parent-component.ts看起來是這樣的：


    class ParentComponent { 

    someInputValue = 'Some Input Value'; 

}

child-component.html看起來是這樣的：

<p>Some Input Value {{someInputValue}}</p>

child-component.ts看起來是這樣的：


import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'child-component', 
    templateUrl: './child-component.html' 
}) 
export class ChildComponent implements OnInit { 

    @Input() someInputValue: String = "Some default value"; 

    @Input() 
    set setSomeInputValue(val) { 
    this.someInputValue += " modified"; 
    } 

    constructor() { 
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined 
    } 

    ngOnInit() { 
    console.log('someInputValue in ngOnInit ************** ', this.someInputValue); //someInputValue in ngOnInit ************** Some Input Value 
    } 
}

注意，@Input值的值可用內ngOnInit()，而不是內部constructor()。

對象引用在角2/4

在Javascript中的行爲，對象存儲爲references。

這個確切的行爲可以被重新制作，具有角2/4，下列的說明是解釋執行的例子：

parent-component.ts看起來是這樣的：


    class ParentComponent { 

    someInputValue = {input: 'Some Input Value'}; 

}

parent-component.html看起來是這樣的：


{{someInputValue.input}}

child-component.html看起來是這樣的：



Some Input Value {{someInputValue}} 
change input

child-component.ts看起來是這樣的：


import { Component, OnInit, Input } from '@angular/core'; 

@Component({ 
    selector: 'child-component', 
    templateUrl: './child-component.html' 
}) 
export class ChildComponent implements OnInit { 

    @Input() someInputValue = {input:"Some default value"}; 

    @Input() 
    set setSomeInputValue(val) { 
    this.someInputValue.input += " set from setter"; 
    } 

    constructor() { 
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined 
    } 

    ngOnInit() { 
    console.log('someInputValue in ngOnInit ************** ', this.someInputValue); //someInputValue in ngOnInit ************** Some Input Value 
    } 

    changeInput(){ 
    this.someInputValue.input += " changed"; 
    } 
}

功能changeInput()會改變，因爲他們參考的someInputValue都ChildComponent & ParentComponent內的值。因爲，someInputValue從ParentComponent引用的someInputValue對象 - 在ChildComponent變化的someInputValue對象改變ParentComponent的someInputValue對象的值。 這是不正確的。引用永遠不會改變。

來源

2017-08-14 19:30:16 xameeramir

是那麼容易的字符串周圍用雙引號，像這樣：

<TestCmp [test]="'Blue32'"></TestCmp>

來源

2017-08-21 12:21:22 fgonzalez

Angular 2 Component @Input not working

回答

更新

相關問題