如何在Angular 2中設置組件的屬性值？

Question

儘管我沒有編譯器錯誤，並且智能感知正在完成不同的組件，但數據並沒有在視圖中設置。

app.component.ts

onSelect(item: TodoItem) { 
    this.SelectItemComponent.selectedItem = { Name: 'name', Key: 'key' }; 
} 

選擇-item.component.ts

ngOnInit() { 
    this.selectedItem = { Name: 'Name', Key: 'Key' }; 
} 

在select-item.component.ts的ngOnInit()正確地設置視圖的值，而是從selectedItem組app.component.ts不會更新視圖。

全碼： app.component.ts

import { Inject, Component } from 'angular2/core'; 
import { DataService } from './data.service'; 
import { TodoItem } from './TodoItem'; 
import { AddItemComponent } from './add-item.component'; 
import { SelectItemComponent } from './select-item.component'; 

@Component({ 
    selector: 'app', 
    directives: [ 
     AddItemComponent, 
     SelectItemComponent 
    ], 
    templateUrl: 'templates/app.html' 
}) 

export class AppComponent { 
    private items: Array<TodoItem> = new Array<TodoItem>(); 
    private selectedItem: TodoItem; 
    public SelectItemComponent: SelectItemComponent; 

    constructor(@Inject(DataService) public dataService: DataService) { 
    } 

    ngOnInit() { 
     this.dataService.collection$.subscribe(latestCollection => { 
      this.items = latestCollection; 
     }); 
     this.dataService.getItems(); 
    } 

    onSelect(item: TodoItem) { 
     this.SelectItemComponent.selectedItem = { Name: item.Name, Key:  item.Key }; 
    } 
} 

選擇-item.component.ts

import { Component, Inject } from 'angular2/core'; 
import { TodoItem } from './TodoItem'; 
import { DataService } from './data.service'; 
import { Observable } from 'rxjs/Observable'; 

@Component({ 
    selector: 'select-item', 
    templateUrl: 'templates/select-item.html' 
}) 

export class SelectItemComponent { 
    public selectedItem: TodoItem; 
    public collection$: Observable<Array<TodoItem>>; 
    private _collectionObserver: any; 
    private _collection: Array<TodoItem>; 

    constructor(@Inject(DataService) public dataService: DataService) { } 

    ngOnInit() { 
     this.selectedItem = { Name: 'Name', Key: 'Key' }; 
    } 
} 

Answer 1

感謝loose11 !!））我發現@input（）打破了角2 Beta 2中，雖然我的天堂我用我將要做的回調試了一下）。此代碼使用：

inputs: ['selectedItem: item'], 

app.component.ts

import { Inject, Component, Input } from 'angular2/core'; 
import { DataService } from './data.service'; 
import { TodoItem } from './TodoItem'; 
import { AddItemComponent } from './add-item.component'; 
import { SelectItemComponent } from './select-item.component'; 

@Component({ 
    selector: 'app', 
    directives: [ 
     AddItemComponent, 
     SelectItemComponent 
    ], 
    templateUrl: 'templates/app.html' 
}) 

export class AppComponent { 
    private items: Array<TodoItem> = new Array<TodoItem>(); 
    item: TodoItem; 

    constructor(@Inject(DataService) public dataService: DataService) { 
    } 

    ngOnInit() { 
     this.dataService.collection$.subscribe(latestCollection => { 
      this.items = latestCollection; 
     }); 
     this.dataService.getItems(); 
     this.item = { Name: '', Key: '' }; 
    } 

    onSelect(item: TodoItem) { 
      this.item = { Name: item.Name, Key: item.Key }; 
     } 
    } 

選擇項分量。TS

import { Component, Inject, Input } from 'angular2/core'; 
import { TodoItem } from './TodoItem'; 
import { DataService } from './data.service'; 
import { Observable } from 'rxjs/Observable'; 

@Component({ 
    selector: 'select-item', 
    inputs: ['selectedItem: item'], 
    templateUrl: 'templates/select-item.html' 
}) 

export class SelectItemComponent { 
    public collection$: Observable<Array<TodoItem>>; 
    private _collectionObserver: any; 
    private _collection: Array<TodoItem>; 

    constructor(@Inject(DataService) public dataService: DataService) { } 

} 

app.html需要驗證碼

<select-item [item]="item"></select-item> 

Answer 2

如果選擇-item.component是一個組件app.component喲你可以通過@輸入和@輸出進行通信。角度文檔描述得非常好。 @Output用於父母之間的溝通以及父母之間的溝通@Input。

在你的情況，你需要的@Output在選擇，item.component，並在app.component回調。

例如：

選擇-item.component.ts

export class SelectItemComponent { 
    @Output() callback:EventEmitter<any> = new EventEmitter(); 

    public selectedItem: TodoItem; 


    constructor(@Inject(DataService) public dataService: DataService) { } 

    ngOnInit() { 
    this.callback.emit({ Name: 'Name', Key: 'Key' }); 
    } 
} 

回調你不需要觸摸app.component，只有HTML模板設置回調爲孩子。

<select-item (callback)="onSelect($event)"></select-item> 

如果沒有選擇項觸發回調，應用程序得到通知，並更新的值