2016-01-21 32 views
5

Uygulamamda Ana Sayfa olarak kök bileşenim ve listenin içerdiği başka bir genel bileşen var.Açısal 2: öznitelikler alt bileşenlere nasıl geçirilir?

Verileri XMLHttpRequest kaynağından gelen liste bileşenime iletmek istiyorum.

home.ts

import {Component} from 'angular2/core'; 
import {DashboardService} from '../../services/dashboard'; 
import {List} from '../contact/list'; 

@Component({ 
    selector: 'home', 
    template: 
    ` 
    <h3>Home</h3> 
    <List type="{{type}}"></List> 
    ` 
    providers: [DashboardService], 
    directives: [List], 
}) 
export class Home { 

    private _type: any; 

    constructor(private _dashboardService: DashboardService) { 
    this._dashboardService.typeToDisplay() 
     .subscribe((type) => { 
      this._type = type; 
     }); 
    } 
} 

List.ts

@Component({ 
    selector: 'List', 
    properties: ['type'], 
    template: ` 
     <h2>list</h3> 
    `, 
    providers: [DashboardService] 
}) 
export class List { 

    private type: any; 

    constructor(@Attribute('type') type:string) { 
    this.type = type; 
    console.log(type); 
    } 
} 

Ben değişkeni yazın atama() yöntemini typeToDisplay onun bir HTTP isteği & dize verileri alıyorum. ancak liste bileşenine özellik olarak geçtiğimde, List kurucuda boş alıyorum.

Denedim ama aynı şekilde "type" dizesi alıyorum. Umarım sorumuz açıktır.

<List type="{{type}}"></List> 

cevap

3

Bu sözdizimi bir özellik değil, bir nitelik ayarlıyor.
bir özellik kullanmak ayarlamak için ya

<List attr.type="{{type}}"></List> 

veya

<List [attr.type]="type"></List> 

sadece List kullanım yerine nitelik enjeksiyon

@Input() type: any; 

mevcut değere sahip olmak istiyorsanız

.
Bu şekilde, değer yapıcı içinde henüz mevcut değil, yalnızca ngOnInit() veya daha sonraki sürümlerde.

+0

** Teşekkür ederiz! Dokümanları özlüyorum ** –

+1

Dokümanlar devam ediyor. Açısal hala devam ediyor. Yazılımın geliştirilmesinden önce doküman yazmak genellikle geliştirilmez ;-). Ayrıca kaynak koddaki kod belgelerini de kontrol edin. Bir çok sınıfın Plunker'deki çalışma örneklerine oldukça kapsamlı dokümantasyonu ve bağlantıları var. –