Question

我正在尝试角度2，我觉得它很棒！但我无法弄清楚如何发布/订阅事件。

例如：我有两个小组件：componentA和componentB。 ComponentA包含水果列表。 ComponentB包含水果的细节。当用户从列表中选择一个水果（componentA）时，我希望ComponentB执行一个函数（例如console.log（event））。

要实现此行为，我想使用事件。 ComponentA不是componentB的父级，它们是兄弟。但我希望事件向下传播，也向上传播。知道活动名称的任何人都必须能够订阅此活动。

有可能吗？我想使用angular2类，而不是外部库。

我目前的代码：

export class ComponentA
{
    @Output() emitter: EventEmitter<string> = new EventEmitter();

    private onFruitSelected():void
    {
        this.emitter.emit ("Hello!");
    }
}


export class ComponentA
{
    constructor ():void
    {
        // subscribe doJob() to the event
    }

    private doJob ():void { console.log('event catched'); }
}

谢谢！

修改

我以这种方式更新了代码：

事件处理程序服务：

export class EventEmitterService 
{
    @Output() eventOne: EventEmitter<string> = new EventEmitter();
    @Output() eventTwo: EventEmitter<number> = new EventEmitter();
}

componentA（事件发件人）：

export class ComponentA
{
    public constructor(private eventHandler:EventEmitterService) {}

    private onFruitSelected():void
    {
        this.emitter.emit ("Hello!");
        this.eventHandler.eventOne.emit ("Hello event one");
        this.eventHandler.eventTwo.emit (12);
    }
}

componentB（事件接收者）：

export class ComponentA
{
    constructor ():void
    {
        eventHandler.eventOne.subscribe ((evt:string) => { 
            console.log ('Event one ' + evt); 
        });

        eventHandler.eventTwo.subscribe ((evt:number) => { 
            console.log ('Event two ' + evt); 
        });
    }
}

这是一个很好的解决方案吗？

Answer 1

Angular2没有为此提供功能。您可以使用自定义事件总线服务。另见

向下和向上事件

1 个答案: