2015-11-06 2 views
33

Ho un semplice componente Angular 2 con @Input, che collego al modello. Il modello mostra i dati di ingresso, ma non posso accedervi dal costruttore:Impossibile accedere agli input dal mio controller/costruttore

import {Component, View, bootstrap, Input} from 'angular2/angular2'; 
import DataService from './data-service'; 

@Component({ 
    selector: 'app-cmp' 
}) 
@View({ 
    template: `{{data.firstName}} {{data.lastName}}` //-> shows the correct 'data' 
}) 
export default class NamesComponent { 
    @Input() data: any; 
    constructor(dataService: DataService) { 
    console.log(this.data);//undefined 
    } 
} 

Ecco un plunker con un esempio (vedi "nomi-component.ts").

Cosa sto sbagliando?

risposta

76

Poiché la proprietà Input non è inizializzata finché non viene impostata la vista. Secondo lo docs, è possibile accedere ai propri dati nel metodo ngOnInit.

import {Component, bootstrap, Input, OnInit} from '@angular/core'; 
import DataService from './data-service'; 

@Component({ 
    selector: 'app-cmp', 
    template: `{{data.firstName}} {{data.lastName}} {{name}}` 
}) 
export default class NamesComponent implements OnInit { 
    @Input() data; 
    name: string; 
    constructor(dataService: DataService) { 
    this.name = dataService.concatNames("a", "b"); 
    console.log(this.data); // undefined here 
    } 
    ngOnInit() { 
    console.log(this.data); // object here 
    } 
} 
+0

Sulla base della api più recente, hai veramente bisogno di importare OnInit da "angular2/angular2", e quindi modificare la classe per implementare OnInit e quindi dovrebbe essere simile: export classe predefinita NamesComponent implementa OnInit { . .. } – jgo

+0

Questa risposta funziona ancora con 2.0.0-beta.8. Quindi un servizio può essere inizializzato nel costruttore (costruttore (dataService: DataService) {this.dataService = dataservice}). Ma il recupero effettivo del servizio usando l'input come argomento dovrebbe avvenire all'interno della funzione ngOnInit() (usando qualcosa come ngOnInit() {var data = this.dataService; this.dataService.getData (data) .subscribe .. . –