Emit angular2 событие из класса машинописного текста, которое ** не ** является угловым компонентом

Question

Я создаю интерактивное веб-приложение, а основная часть моей веб-страницы - это угловой компонент, interactionStage.component, в котором размещается класс машинописного текста . Последнее, как следует из названия, представляет собой графический «этап», с которым пользователи могут взаимодействовать, он слушает и реагирует на ряд событий мыши, которые важны в контексте сцены.

Опуская ненужные детали, мой 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 генерирует это так, чтобы я взять на себя практику