从打字稿类发出不是Angular组件的angular2事件

Question

我正在构建一个交互式Web应用程序，并且我网页的核心部分是一个有角组件， interactionStage.component ，其中包含一个打字稿类InteractionStage.ts 。 顾名思义，后者是一个图形“阶段”，用户可以与之交互，侦听并响应在此阶段上下文中很重要的许多鼠标事件。

省略不必要的细节，我的interactionStage.component看起来像这样：

@Component({
    selector: 'interaction-stage',
    templateUrl: './interactionStage.component.html',
    styleUrls: ['./interactionStage.component.css'],
})
export class InteractionStage.component implements OnInit {
    private stage : InteractionStage;

    constructor(){
        this.stage = new InteractionStage();
    }

    catchImportantEvent($event) {
        console.log($event);
        //Do stuff with the event data
    }
}

没有太多要显示的内容，但是只是为了给您一些上下文，我的InteractionStage类看起来像这样：

export class InteractionStage {

    constructor(){
        //initialize important stuff here
    }

    public emitImportantEvent() {
        //TODO: emit an event so that interactionStage.component receives it
    }
}

鉴于InteractionStage的性质，它需要能够在发生操作时发出事件，例如，向用户通知某些内容，显示模式或更改DOM。 这些事件需要由InteractionStage.component接收，将来，可能需要由页面上的其他角度组件接收。

我面临的问题是从InteractionStage发出这些事件。 我知道如何使用@Output符号使用角度分量来发出和捕获事件。 作为在黑暗中的刺伤，我尝试在InteractionStage类中使用它：

import { Output, EventEmitter } from '@angular/core';

export class InteractionStage {

    @Output importantEvent: EventEmitter<any> new EventEmitter();

    constructor(){
        //initialize important stuff here
    }

    public emitImportantEvent() {
        var importantData = "here is a very important string";
        this.importantEvent.emit(importantData);
    }
}

然后，我试图在我的InteractionStage.component捕获此事件，如下所示：

 <interaction-stage (importantEvent)=catchImportantEvent($event)></interaction-stage>

但是，绝对没有任何反应。 没有接收到事件，也没有任何日志记录到控制台。

我是在做错什么，还是我想做的是不可能的？ 如果无法完成，该如何从打字稿文件发送事件并使其被角度组件捕获？

我知道我可以传递的参考InteractionStage.component到的构造InteractionStage ，但我认为这是一个代码味道-耦合是unneccesary。 交互阶段不应该知道保持它的角度分量。

Answer 1

@Component({
selector: 'interaction-stage',
    templateUrl: './interactionStage.component.html',
    styleUrls: ['./interactionStage.component.css'],
})
export class InteractionStageComponent implements OnInit {
    private stage : InteractionStage;
    @Output myEmitter: EventEmitter<any> = new EventEmitter<any>();

    constructor(){
        this.stage = new InteractionStage(myEmitter);
    }

    catchImportantEvent($event) {
        console.log($event);
        //Do stuff with the event data
    }
}

export class InteractionStage {

    constructor(private myEmitter: EventEmitter<any>){
        //initialize important stuff here
    }

    public emitImportantEvent() {
      this.myEmitter.emit("my data");
        //TODO: emit an event so that interactionStage.component receives it
    }
}

我也将InteractionStage.component更改为InteractionStageComponent，因为angularCLI会像这样生成它，所以我假设它是一种实践