Question

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

app.component.ts

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

选择-item.component.ts

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

ngOnInit()中的select-item.component.ts正确设置了视图的值，但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

如果 select-item.component 是 app.component 的一个组件，您可以使用 @Input 和 @Output 。有角度的文档很好地描述了它。 @Output用于与父级进行通信，@Input用于父级与子级之间的通信。

在您的情况下，您需要 select-item.component 中的@Output和 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>

如果select-item触发回调，则该应用获取通知并更新值

Answer 2

感谢loose11 !!））我发现@Input（）打破了Angular 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 };
        }
    }

选择项-component.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>

如何在Angular 2中的其他Component中设置Component属性的值？

2 个答案: