根据Angular 2

Question

我有两个组件让我们称它们为CompA和CompB。我希望CompA中单击的项目对象出现在CompB中。这是我到目前为止所做的。

COMPA：

import {Component} from 'angular2/core';
import {CompB} from './compB';

@Component({
    selector: 'comp-a',
    template: '<ul>
                   <li *ngFor="#item of items" (click)="show(item)">
                       {{item.name}}
                   </li>
               </ul>',
    providers: [CompB]
})
export class CompA {
    constructor(public _compB: CompB){}

    show(item){
        this._compB.displayItem(item);
    }
}

CompB的：

import {Component} from 'angular2/core';

@Component({
    selector: 'comp-b',
    template: '<div>
                  {{item.name}}
               </div>'
})
export class CompB {
    public newItem: Object;

    constructor(){
        this.newItem = {name: "TEST"};
    }

    displayItem(item){
        this.newItem = item;
    }
}

问题是当我点击一个项目时，它不会改变CompB中的任何内容。我在CompB上做了一个控制台日志，我得到的项目对象很好，但我查看不会更新所点击的项目的名称。它只是保持'TEST'。

即使我将displayItem函数中的this.newItem设置为硬编码字符串，它仍然不会改变。

更新

这两个组件都是像这样的main.html中的兄弟姐妹......

main.html中

<div class="row">
    <div class="col-sm-3">
        <comp-a></comp-a>
    </div>
    <div class="col-sm-9">
        <comp-b></comp-b>
    </div>
</div>

Answer 1

这是因为在构造函数中注入的组件B不是应用程序中使用的组件B.它是分层注入器创建的另一个组件B，当组件B被添加到提供者列表时。

一种方法是创建一个单独的可注射服务，并将其注入两个组件中。一个组件订阅该服务，另一个组件触发修改。例如：

@Injectable()
export class ItemsService {

    private items = new Subject(); 

    newItem(item) {
        this.subject.next(item);
    }
}

这需要在Angular 2应用程序的引导程序中配置：

boostrap(YourRootComponent, [ItemsService, ... other injectables]);

然后将其注入两个组件。组件A发送新项目：

export class CompA {
    constructor(private itemsService: ItemsService){}

    show(item){
        this.itemsService.newItem(item);
    }
}

组件B订阅新项目：

export class CompB {
    constructor(itemsService: ItemsService){
        itemsService.items.subscribe((newItem) => {
            //receive new item here
        });
    }

查看async pipe，因为直接使用模板中的observable非常有用。

Answer 2

如果您将CompB实例传递给

constructor(public _compB: CompB){}

它不是您期望的实例，而是不同的（新）实例。

组件之间有不同的通信策略。这取决于它们在视图中的相关性。他们是兄弟姐妹，父母和孩子还是别的什么。您的问题不提供此信息。

对于父母和子女，您可以使用数据绑定输入和输出。

对于兄弟姐妹，如果包含普通父母（将其用作调解员）

，则可以使用数据绑定

您始终可以使用共享服务。

有关数据绑定的详细信息，请参阅https://angular.io/docs/ts/latest/guide/template-syntax.html