JavaScript Angular 2同级组件通信

小编典典

JavaScript Angular 2同级组件通信

spring

我有一个ListComponent。在ListComponent中单击某个项目时，该项目的详细信息应显示在DetailComponent中。两者同时显示在屏幕上，因此不涉及路由。

如何告诉DetailComponent单击ListComponent中的哪个项目？

我考虑过向父对象（AppComponent）发出事件，并让父对象使用@Input在DetailComponent上设置selectedItem.id。或者，我可以将共享服务与可观察的订阅一起使用。

编辑：通过事件+ @Input设置所选的项目不会触发DetailComponent，但是，以防万一我需要执行其他代码。因此，我不确定这是否是可接受的解决方案。

但是，这两种方法似乎都比通过Angular 1做事方式复杂得多，后者是通过$ rootScope。$ broadcast或$ scope。$ parent。$ broadcast实现的。

由于Angular 2中的所有内容都是组件，我很惊讶没有更多有关组件通信的信息。

是否有另一种/更直接的方法来完成此任务？

阅读 676

2020-04-26

共1个答案

小编典典

更新到rc.4：当试图使数据在angular 2的兄弟组件之间传递时，目前最简单的方法（angular.rc.4）是利用angular2的分层依赖注入并创建共享服务。

这将是服务：

import {Injectable} from '@angular/core';

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

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

现在，这里是PARENT组件

import {Component} from '@angular/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 '@angular/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（同级）

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

现在：使用此方法时要注意的事项。

仅在PARENT组件中包括共享服务的服务提供者，而不在子组件中。
你仍然必须包括构造函数并将服务导入子项中
此答案最初是针对早期的angular 2 beta版本回答的。尽管所有更改都不过是import语句，所以如果你偶然使用了原始版本，则只需更新即可。

2020-04-26