2015-11-06 19 views
33

Şablona bağladığım @Input ile basit bir Açısal 2 bileşenim var. Şablon girdi verileri gösterir, ancak yapıcı gelen erişemez:Denetleyiciden/yapıcımdan gelen Girişlere erişilemiyor

İşte
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 
    } 
} 

örnek ("isimler-component.ts" bölümüne bakınız) ile bir plunker olduğunu.

Neyi yanlış yapıyorum?

cevap

76

Input özelliği, görünüm ayarlanana kadar başlatılamıyor. docs'a göre, verilerinize ngOnInit yönteminde erişebilirsiniz. ihracat varsayılan sınıf NamesComponent OnInit { uygular: Bu gibi görünmelidir böylece

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

yeni API dayanarak, aslında OnInit uygulamak için sınıf değiştirmek ardından "angular2/angular2" dan OnInit aktarabilir ve gerek. .. } – jgo

+0

Bu cevap hala 2.0.0-beta.8 ile çalışıyor. Böylece bir hizmet kurucuda başlatılabilir (kurucu (dataService: DataService) {this.dataService = dataservice}). Ancak, argüman olarak girdiyi kullanarak hizmetin gerçek getirilmesi, ngOnInit() işlevi içinde (ngOnInit() gibi bir şey kullanılarak gerçekleştirilmelidir) {var data = this.dataService; this.dataService.getData (data) .subscribe .. . –

İlgili konular