私はインタラクティブなWebアプリケーションを構築しています。私のウェブページのコア部分は、interactionStage.componentのタイプコンポーネントInteractionStage.tsを収容する角度コンポーネントです。後者は、名前が意味するように、ユーザーが対話できるグラフィカルな「ステージ」であり、ステージのコンテキストで重要ないくつかのマウスイベントをリッスンし、それに応答します。不必要な詳細を省略角型コンポーネントではないタイプスクリプトクラスからangular2イベントを送出します。
は、私のinteractionStage.componentは次のようになります。
export class InteractionStage {
constructor(){
//initialize important stuff here
}
public emitImportantEvent() {
//TODO: emit an event so that interactionStage.component receives it
}
}
を考える：あり表示多くはないのですが、ちょうどあなたにいくつかのコンテキストを与えること
@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クラスは次のようになりますInteractionStageという性質のため、何かをユーザに通知したり、モーダルを表示したり、DOMを変更したりするなど、アクションが発生したときにイベントを放出する必要があります。これらのイベントはInteractionStage.componentで受信する必要があり、将来はページ上の他の角度成分で受信する必要があります。
私が直面している問題は、これらのイベントをInteractionStageから発信していることです。 @Output表記を使用して、角度コンポーネントを使用してイベントを放出して捕捉する方法を知っています。
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クラスのことを使用してみましたイベントは受信されず、コンソールには何も記録されません。
私は何か間違っているのですか、私が不可能なことをしようとしていますか？できない場合は、typescriptファイルからイベントを送信し、角型コンポーネントにキャッチさせる方法はありますか？
私はInteractionStage.componentの参照をInteractionStageというコンストラクタに渡すことができますが、これは不必要なコードの臭い結合だと思います。相互作用段階は、それを保持する角度成分について知るべきではない。