Nie można uzyskać dostępu do danych wejściowych z mojego kontrolera/konstruktora.

Question

Mam prosty komponent Angular 2 z @Input, który łączę z szablonem. Szablon pokazuje dane wejściowe, ale nie można uzyskać do niego dostęp z konstruktora:

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

Oto plunker na przykładzie (patrz „nazwy-component.ts”).

Co robię źle?

Answer 1

Ponieważ właściwość Input nie została zainicjowana, dopóki widok nie zostanie skonfigurowany. Zgodnie z docs, masz dostęp do swoich danych w metodzie 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 
    } 
}