Angular 2 Component @ Input non funzionante

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 sto chiamando il componente dalla pagina padre.

  

Quando il rendering della pagina è vuoto, il valore del test è vuoto. Vedo solo “Test Value:”.

Invece di ‘Test Value: Blue32’.

Hai quattro cose che posso notare:

  • Stai passando un input nel componente root, che non funzionerà.
  • Come menzionato @alexpods, stai utilizzando CamelCase. Non dovresti.
  • Stai passando un’espressione invece di una stringa attraverso [test] . Ciò significa che angular2 sta cercando una variabile denominata Blue32 invece di passare una stringa raw.
  • Stai usando il costruttore. Non funzionerà, deve essere dopo che la vista è stata inizializzata. Le proprietà associate ai dati sono state inizializzate (vedere i documenti per OnInit ).

Quindi con alcune correzioni dovrebbe funzionare

Esempio aggiornato alla versione 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 : `` directives : [ChildCmp] }) export class TestCmp {} bootstrap(TestCmp); 

Vedi questo plnkr come esempio.

Aggiornare

Vedo che le persone raggiungono ancora questa risposta, quindi ho aggiornato il plnkr alla beta 1 e ho corretto un punto nella spiegazione: È ansible accedere agli input in ngAfterViewInit, ma è ansible accedervi in ​​precedenza nel ciclo di vita all’interno di ngOnInit.

Questa class angular 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') } 

È facile come circondare la stringa con virgolette doppie, in questo modo:

  

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.

Forse sembra un martello , ma puoi inserire l’input su un object come questo:

  

e cambia la tua class

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

devi importare input come questo nella parte superiore del componente figlio

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

Quando si utilizza @Input per l’interazione angular. È sempre preferibile l’approccio per passare i dati da padre a figlio nell’object JSON, a quanto pare non limita il team @Angular a utilizzare variabili locali o variabili statiche.

Nel contesto per accedere al valore sul componente figlio, utilizzare ngOnInit () {} ciclo di aghook angular della vita indipendentemente dal costruttore.

Questo ti aiuterà. Saluti.

Condividere ciò che ha funzionato per me:

Aggiunta di un input all’app Angular 4

Supponendo che abbiamo 2 componenti:

  • parent-component
  • child-component

Volevamo passare qualche valore dal parent-component child-component ovvero un valore @Input da parent-component.html a child-component.ts . Di seguito è riportato un esempio che spiega l’implementazione:

parent-component.html aspetto:

parent-component.ts assomiglia a questo:

 class ParentComponent { someInputValue = 'Some Input Value'; } 

child-component.html presenta così:

Some Input Value {{someInputValue}}

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 di ngOnInit() e non all’interno di constructor() .

Comportamento di riferimento agli oggetti in Angular 2/4

In Javascript, gli oggetti sono memorizzati come riferimenti .

Questo comportamento esatto può essere riprodotto con l’aiuto di Angular 2 / 4. Di seguito è riportato un esempio che spiega l’implementazione:

parent-component.ts assomiglia a questo:

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

parent-component.html aspetto:

 {{someInputValue.input}} 

child-component.html presenta così:

 

 

Qualche valore di input {{someInputValue}}

cambia input

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 = {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 di ChildComponent e ParentComponent causa del loro riferimento. Poiché, someInputValue viene fatto riferimento dall’object ParentComponent di someInputValue – la modifica ChildComponent di someInputValue modifica il valore dell’object someInputValue . QUESTO NON È CORRETTO . I riferimenti non devono mai essere modificati.

Se si desidera passare una stringa come valore al componente figlio, è ansible passarlo in questo modo:

  

E poi portalo su child.component.ts in questo modo:

 import { Component, Input } from "@angular/core"; @Component({}) export class ChildComponent { @Input() valueComing: string; }