从类型脚类中发出angular2事件** **不是角度组件

Question

我正在构建一个交互式Web应用程序，我的网页的核心部分是一个角度组件interactionStage.component，其中包含一个打字稿类InteractionStage.ts。正如其名称所暗示的，后者是一个图形化的阶段＆＃34;用户可以与之交互，它会监听并响应一些在舞台环境中很重要的鼠标事件。

省略不必要的细节，我的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的构造函数，但我认为这是代码味道 - 耦合是不必要的。交互阶段不应该知道持有它的角度分量。

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会生成它，所以我假设它是一种练习