基于什么被点击另一个组件在2角一个组件更新数据 [英] Update the data in one component based on what is clicked in another component in Angular 2

问题描述

我有两个组成部分，让我们给他们打电话COMPA COMPB的。我想在COMPA被点击的项目对象出现在COMPB。以下是我迄今所做的。

COMPA

 进口{}组件从angular2 /核心;
进口{} COMPB从'./compB';@零件（{
    选择：排版-A'，
    模板：'＆LT; UL＆GT;
                   ≤（点击）=显示（项目）＆GT李* ngFor =项目＃项目;
                       {{项目名}}
                   ＆LT; /李＆GT;
               ＆所述; / UL＆GT;'，
    供应商：[COMPB]
}）
出口类COMPA {
    构造函数（公共_compB：COMPB）{}    显示（项目）{
        this._compB.displayItem（项目）;
    }
}
 

COMPB

 进口{}组件从angular2 /核心;@零件（{
    选择：COMP-B'，
    模板：'＆LT; D​​IV＆GT;
                  {{项目名}}
               ＆LT; / DIV＆GT;'
}）
出口类COMPB {
    公众的newitem：对象;    构造函数（）{
        this.newItem = {名：TEST};
    }    displayItem（项目）{
        this.newItem =项目;
    }
}
 

问题是，当我点击一个项目它不会改变任何东西COMPB。我做了一个COMPB控制台日志，我得到的项目对象得很好，但我认为不会与点击项目名称更新。它只是停留为测试。

即使我在displayItem功能设置this.newItem到硬codeD字符串，它仍然不会改变。

更新：

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

main.html中

 ＆LT; D​​IV CLASS =行＆GT;
    ＆LT; D​​IV CLASS =COL-SM-3＆GT;
        ＆LT; COMP-A＆GT;＆LT; / COMP-A＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =COL-SM-9＆GT;
        ＆LT;可比-B＆GT;＆LT; / COMP-B＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

那是因为你有在构造函数注入组件B不是在应用中使用的B组分。其是分层注射器创建另一组分B，当B组分加入到提供商列表

做到这一点的方法之一是创建一个单独的注射服务，并在这两个组件注入它。一个组件预订服务和其他触发修改。例如：

  @Injectable（）
出口类ItemsService {    私人物品=新主题（）;    的newitem（项目）{
        this.subject.next（项目）;
    }
}
 

这需要在角2应用程序的引导程序进行配置：

 自举（YourRootComponent，[ItemsService，...其他注射]）;
 

和再注入这两个组件。组件A发送新的项目：

 出口类COMPA {
    构造函数（私人itemsService：ItemsService）{}    显示（项目）{
        this.itemsService.newItem（项目）;
    }
}
 

和B组份订阅新项目：

 出口类COMPB {
    构造函数（itemsService：ItemsService）{
        itemsService.items.subscribe（（的newitem）= GT; {
            //这里接受新项目
        }）;
    }
 

有一个看异步管，作为其有用的消耗在直接模板观测。

I have two components let's call them CompA and CompB. I would like for the clicked item object in CompA to appear in CompB. Here is what I have done so far.

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

The problem is that when I click an item it doesn't change anything in CompB. I did a console log on CompB and I am getting the item object just fine but I view doesn't update with the clicked item's name. It just stays as 'TEST'.

Even if I set this.newItem in the displayItem function to a hardcoded string, it still doesn't change.

Update:

Both components are siblings in a main.html like this...

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>

解决方案

Thats because the Component B you got injected in the constructor is not the component B used in the application. Its another component B that the hierarchical injector created, when Component B was added to the list of providers.

One way to do it is to create a separate injectable service, and inject it in both components. One component subscribes to the service and the other triggers a modification. For example:

@Injectable()
export class ItemsService {

    private items = new Subject(); 

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

This needs to be configured in the bootstrap of the Angular 2 app:

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

And then inject it on both components. Component A sends new items:

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

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

And component B subscribes to new items:

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

Have a look at the async pipe, as its useful to consume observables in the template directly.

这篇关于基于什么被点击另一个组件在2角一个组件更新数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！