1
私はwindowのイベントを、typescriptで書かれたangular2アプリケーションの中から聴こうとしています。 jquery（typingsで追加）も使用しています。Typescript（angular2）のウィンドウイベントをリッスン
私が聴きたいイベントは、index.htmlの<script>タグ内に追加する外部ライブラリによって追加されます。私はindex.htmlを上windowにリスナーを追加する場合は、[OK]を動作します：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://my-host/front-libs/jquery/1.8.3/jquery-1.8.3.min.js"></script>
<script src="https://my-host/my-external-lib.min.js"></script>
<title>Angular 2 App | ng2-webpack</title>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
<script>
// this works!!
$(window).on('authenticatedUser', function(e) {
console.log('ok.');
});
</script>
<base href="/">
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
しかし、私は私のangular2アプリの中から、同じイベントをリッスンしようとした場合、それはしていません：
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { ApiService } from './shared';
import '../style/app.scss';
/*
* App Component
* Top Level Component
*/
@Component({
selector: 'my-app', // <my-app></my-app>
providers: [ApiService],
directives: [...ROUTER_DIRECTIVES],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
url = 'https://github.com/preboot/angular2-webpack';
ngOnInit(){
// this doesn't seem to work. I never get notified about
// 'authenticatedUser' events on `window`
$((<any>window)).on('authenticatedUser', function(e) {
console.log('fuuuu');
});
// this triggers events on `window`
(<any>window).myNamespace.start({
scopeName: null,
canClose: false,
returnUrl: 'http://localhost:8080/loggedIn'
});
}
constructor(private api: ApiService) { }
}
これは、angle2アプリケーション内のウィンドウにイベントハンドラを取り付ける正しい方法ですか？私は良い方法がなければならないと感じています。
のようなものを推奨していますよう
は、しかし、あなたがHostListenerを試したようなウィンドウイベントに聞いていません？ –