Componente angolare 2 @Input non funzionante

Question

Sono bloccato nel tentativo di passare un valore di proprietà nel mio componente. Da quello che ho letto tutto sembra corretto. Ma non funziona ancora. Il mio valore di test viene emesso sullo schermo e la console è nullo. :(

Questo è il mio componente di prova:.

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

Questo è come mi chiamo il componente dalla pagina padre

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

Quando il rendering della pagina è il valore di prova è vuota Vedo solo "Valore di prova:"

Invece di "Valore di test: Blue32"

Answer 1

Avete quattro cose che posso notare:

• si passa ad un ingresso nella componente principale, che non funziona.
• Come @alexpods menzionato, si sta utilizzando CamelCase. Non dovresti.
• Si sta passando un'espressione anziché una stringa tramite [test]. Ciò significa che angular2 sta cercando una variabile denominata Blue32 invece di passare una stringa non elaborata.
• Si sta utilizzando il costruttore. Ciò non funzionerà, deve essere dopo che la vista è stata inizializzata. Le proprietà con associazione a dati sono state inizializzate (consultare i documenti per OnInit).

Quindi, con alcune correzioni dovrebbe funzionare

Esempio aggiornato alla beta 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); 

Vai a questa plnkr come esempio.

Aggiornamento

vedo che le persone a raggiungere ancora questa risposta, così ho aggiornato il plnkr alla beta 1 ed ho corretto un punto sulla spiegazione: È possibile accedere a ingressi in ngAfterViewInit, ma è possibile accedervi in ​​precedenza nel ciclo di vita di ngOnInit.

Answer 2

Credo che il problema qui potrebbe avere a che fare con il ciclo di vita della pagina. Perché all'interno del costruttore il valore di this.test è nullo. Ma se aggiungo un pulsante al modello collegato a una funzione che spinge il valore sulla console (come faccio nel costruttore), this.test avrà effettivamente un valore.

Answer 3

Questa classe angolare potrebbe fare il trucco per gli attributi statici: 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') 
} 

Answer 4

Forse sembra un martello, ma si può mettere l'ingresso avvolto su un oggetto come questo:

e cambiare classe

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

Answer 5

è necessario importare ingresso come questo in cima alla componente figlio

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

Answer 6

Quando si stanno facendo uso del @Input per l'interaction.It angolare è sempre preferito l'approccio per passare i dati da genitore a apparentemente, il figlio nell'oggetto JSON non limita il team @Angular a utilizzare variabili locali o variabili statiche.

In contesto per accedere al valore sul componente figlio, utilizzare ngOnInit() {} ciclo di aggancio angolare indipendentemente dal costruttore.

Questo ti aiuterà. Saluti.

Answer 7

condividere ciò che ha funzionato per me:

Aggiunta di un ingresso al angolare 4 app

Supponendo che abbiamo 2 componenti:

• parent-component
• child-component

Volevamo passare qualche valore da parent-component a child-component cioè un @Input da parent-component.html a child-component.ts. Di seguito è riportato un esempio che spiega l'attuazione:

parent-component.html assomiglia a questo:

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

parent-component.ts assomiglia a questo:

    class ParentComponent { 

    someInputValue = 'Some Input Value'; 

} 

child-component.html assomiglia a questo:

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

child-component.ts assomiglia a questo:

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 
    } 
} 

Si noti che il valore del valore @Input è disponibile all'interno ngOnInit() e non all'interno constructor().

oggetti di riferimento comportamento angolare 2/4

In JavaScript, gli oggetti vengono memorizzati come references.

Questo comportamento esatto può essere ri-prodotto con l'aiuto di Angolare 2/4. Di seguito è riportato un esempio che spiega l'attuazione:

parent-component.ts assomiglia a questo:

    class ParentComponent { 

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

} 

parent-component.html assomiglia a questo :

{{someInputValue.input}} 

child-component.html assomiglia a questo:

Some Input Value {{someInputValue}}
 
change input 

child-component.ts aspetto:

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"; 
    } 
} 

La funzione changeInput() cambierà il valore di someInputValue all'interno sia ChildComponent & ParentComponent causa del loro riferimento. Dal momento che, someInputValue viene fatto riferimento da ParentComponent 's someInputValueoggetto - la variazione ChildComponent' s someInputValueoggetto modifica il valore di ParentComponent s' someInputValueoggetto. QUESTO NON E 'CORRETTO. I riferimenti non devono mai essere modificati.

Answer 8

è così facile come circonda la stringa con virgolette, in questo modo:

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