如何在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> 

如果没有选择项触发回调，应用程序得到通知，并更新的值