角2同级组件通信 [英] Angular 2 Sibling Component Communication

问题描述

我有一个ListComponent。当一个项目被点击ListComponent，该项目的细节应在DetailComponent显示。两者都在同一时间在屏幕上，所以没有涉及路由

I have a ListComponent. When an item is clicked in ListComponent, the details of that item should be shown in DetailComponent. Both are on the screen at the same time, so there's no routing involved.

我如何告诉DetailComponent被点击了哪些项目在ListComponent？

How do I tell DetailComponent what item in ListComponent was clicked?

我已经考虑发射一个事件到父（AppComponent），并有家长设置DetailComponent的selectedItem.id与@input。我还可以使用可观察订阅共享服务。

I've considered emitting an event up to the parent (AppComponent), and have the parent set the selectedItem.id on DetailComponent with an @Input. Or I could use a shared service with observable subscriptions.

编辑：通过活动+ @input设置所选的项目不会触发DetailComponent，不过，如果我是需要执行额外的code。所以我不知道这是一个可以接受的解决方案。

Setting the selected item via event + @Input doesn't trigger the DetailComponent, though, in case I were to need to execute additional code. So I'm not sure this is an acceptable solution.

不过，这两种方法似乎比做事这是无论是通过$ rootScope。$广播或$范围。$父。$​​播出的角1路要复杂得多。

But both of these methods seem far more complex than the Angular 1 way of doing things which was either through $rootScope.$broadcast or $scope.$parent.$broadcast.

随着一切都在角2是一个组成部分，我很惊讶有没有更多的信息，那里有关组件通信。

With everything in Angular 2 being a component, I'm surprised there's not more information out there about component communication.

有没有做到这一点的另一个/更简单的方法？

Is there another/more straightforward way to accomplish this?

推荐答案

在试图让角2兄弟组件之间传递数据，现在（angular2测试版）的最有效的方法是采取angular2的层次依赖注入的优势，创建一个共享的服务。

When trying to get data passed between sibling components in angular 2, The most efficient way right now (angular2 beta) is to take advantage of angular2's hierarchal dependency injection and create a shared service.

下面是该服务：

import {Injectable} from 'angular2/core';

@Injectable()
export class SharedService {
    dataArray: string[] = [];

    insertData(data: string){
        this.dataArray.unshift(data);
    }
}

现在，这里将是父组件

import {Component} from 'angular2/core';
import {SharedService} from './shared.service';
import {ChildComponent} from './child.component';
import {ChildSiblingComponent} from './child-sibling.component';
@Component({
    selector: 'parent-component',
    template: `
        <h1>Parent</h1>
        <div>
            <child-component></child-component>
            <child-sibling-component></child-sibling-component>
        </div>
    `,
    providers: [SharedService],
    directives: [ChildComponent, ChildSiblingComponent]
})
export class parentComponent{

} 

和它的两个孩子。

孩子1

import {Component, OnInit} from 'angular2/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-component',
    template: `
        <h1>I am a child</h1>
        <div>
            <ul *ngFor="#data in data">
                <li>{{data}}</li>
            </ul>
        </div>
    `
})
export class ChildComponent implements OnInit{
    data: string[] = [];
    constructor(
        private _sharedService: SharedService) { }
    ngOnInit():any {
        this.data = this._sharedService.dataArray;
    }
}

2子（它的兄弟姐妹）

child 2 (It's sibling)

import {Component} from 'angular2/core';
import {SharedService} from './shared.service'

@Component({
    selector: 'child-sibling-component',
    template: `
        <h1>I am a child</h1>
        <input type="text" [(ngModel)]="data"/>
        <button (click)="addData()"></button>
    `
})
export class ChildSiblingComponent{
    data: string = 'Testing data';
    constructor(
        private _sharedService: SharedService){}
    addData(){
        this._sharedService.insertData(this.data);
        this.data = '';
    }
}

现在：事情使用此方法时拿不出的。

NOW: Things to take not of when using this method.

1. 仅包括在父组件的共享服务的服务提供商，而不是孩子。


2. 您还必须包括构造和儿童导入服务

这篇关于角2同级组件通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！