如何设置Angular 2中不同组件的组件属性值？_Angular

如何设置Angular 2中不同组件的组件属性值？

angular

如何设置Angular 2中不同组件的组件属性值？,angular,Angular,虽然我没有编译器错误，Intellisense正在完成不同的组件，但是数据并没有在视图中设置应用程序组件.ts onSelect(item: TodoItem) { this.SelectItemComponent.selectedItem = { Name: 'name', Key: 'key' }; } ngOnInit() { this.selectedItem = { Name: 'Name', Key: 'Key' }; } import { Inject, Compon

虽然我没有编译器错误，Intellisense正在完成不同的组件，但是数据并没有在视图中设置

应用程序组件.ts

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

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

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

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

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' });
  }
}

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

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

}

选择item.component.ts

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

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

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

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

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' });
  }
}

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

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

}

select item.component.ts

中的

ngOnInit（）

正确设置视图的值，但是

selectedItem

从

app.component.ts

设置不会更新视图

完整代码： 应用程序组件.ts

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

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

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

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

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' });
  }
}

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

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

}

从'angular2/core'导入{Inject，Component}；
从“./data.service”导入{DataService}；
从“/TodoItem”导入{TodoItem}；
从“./add item.component”导入{AddItemComponent}；
从“./select item.component”导入{SelectItemComponent}；
@组成部分({
选择器：“应用程序”，
指令：[
AddItemComponent，
选择项目组件
],
templateUrl:'templates/app.html'
})
导出类AppComponent{
私有项：数组=新数组（）；
私有selectedItem:TodoItem；
public-SelectItemComponent:SelectItemComponent；
构造函数（@Inject（DataService）public-DataService:DataService）{
}
恩戈尼尼特（）{
this.dataService.collection$.subscribe（latestCollection=>{
this.items=最新收集；
});
this.dataService.getItems（）；
}
onSelect（项目：待办事项）{
this.SelectItemComponent.selectedItem={Name:item.Name，Key:item.Key}；
}
}

选择item.component.ts

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

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

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

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

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' });
  }
}

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

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

}

import{Component，Inject}来自'angular2/core'；
从“/TodoItem”导入{TodoItem}；
从“./data.service”导入{DataService}；
从“rxjs/Observable”导入{Observable}；
@组成部分({
选择器：“选择项”，
templateUrl:'templates/select item.html'
})
导出类SelectItemComponent{
公共选择项：TodoItem；
公开募捐$：可见；
私有收集观察者：任何；
私有集合：数组；
构造函数（@Inject（DataService）public-DataService:DataService）{}
恩戈尼尼特（）{
this.selectedItem={Name:'Name'，Key:'Key'}；
}
}

如果选择项组件是应用程序组件的一个组件，则可以使用@Input和@Output在它们之间进行通信。医生对它描述得很好。用于向上与家长沟通以及从家长到孩子的沟通
在本例中，您需要在选择项.component中使用@Output，并在应用程序.component中使用回调
例如：
选择item.component.ts

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

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

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

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

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' }); } }

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

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

导出类SelectItemComponent{ @Output（）回调：EventEmitter=neweventemitter（）；公共选择项：TodoItem；构造函数（@Inject（DataService）public-DataService:DataService）{} 恩戈尼尼特（）{ emit（{Name:'Name'，Key:'Key'}）； } }
对于回调，您不需要触摸app.component，只需使用html模板为子级设置回调

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

否如果选择项触发回调，则应用程序将收到通知并更新值，如果选择项组件是应用程序组件的组件，则可以使用@Input和@Output在它们之间进行通信。医生对它描述得很好。用于向上与家长沟通以及从家长到孩子的沟通
在本例中，您需要在选择项.component中使用@Output，并在应用程序.component中使用回调
例如：
选择item.component.ts

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

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

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

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

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' }); } }

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

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

导出类SelectItemComponent{ @Output（）回调：EventEmitter=neweventemitter（）；公共选择项：TodoItem；构造函数（@Inject（DataService）public-DataService:DataService）{} 恩戈尼尼特（）{ emit（{Name:'Name'，Key:'Key'}）； } }
对于回调，您不需要触摸app.component，只需使用html模板为子级设置回调

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

否如果选择项触发回调，应用程序将收到通知并更新值（谢谢！！）我发现@Input（）破坏了Angular 2 Beta 2，尽管我还没有尝试过回调（我将要做的）。此代码使用以下方式工作：

inputs: ['selectedItem: item'],
应用程序组件.ts

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

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

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

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

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' }); } }

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

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

从'angular2/core'导入{Inject，Component，Input}；从“./data.service”导入{DataService}；从“/TodoItem”导入{TodoItem}；从“./add item.component”导入{AddItemComponent}；从“./select item.component”导入{SelectItemComponent}； @组成部分({ 选择器：“应用程序”，指令：[ AddItemComponent，选择项目组件 ], templateUrl:'templates/app.html' }) 导出类AppComponent{ 私有项：数组=新数组（）；项目：TodoItem；构造函数（@Inject（DataService）public-DataService:DataService）{ } 恩戈尼尼特（）{ this.dataService.collection$.subscribe（latestCollection=>{ this.items=最新收集； }); this.dataService.getItems（）； this.item={Name:''，Key:''}； } onSelect（项目：待办事项）{ this.item={Name:item.Name，Key:item.Key}； } }
选择项目组件。ts

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

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

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

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

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' }); } }

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

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

import{Component，Inject，Input}来自'angular2/core'；从“/TodoItem”导入{TodoItem}；从“./data.service”导入{DataService}；从“rxjs/Observable”导入{Observable}； @组成部分({ 选择器：“选择项”，输入：['selectedItem:item']， templateUrl:'templates/select item.html' }) 导出类SelectItemComponent{ 公开募捐$：可见；私有收集观察者：任何；私有集合：数组；构造函数（@Inject（DataService）public-DataService:DataService）{