angular - Kan inte komma åt Inputs från min controller/konstruktor

Jag har en enkel Angular 2-komponent med @Input, som jag binder till mallen. Mallen visar indatadata, men jag kan inte komma åt den från konstruktorn:

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

Här är en plunker med ett exempel (se "names-component.ts").

Vad gör jag för fel?

Svar #1

Eftersom Input-egenskapen inte initialiseras förrän vyn är uppsatt. Enligt dokumentationen kan du komma åt dina data i ngOnInit-metoden.

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

Svar #2

Du måste implementera OnChanges, se nedan:

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

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

Relaterade artiklar