Javascript 在Typescript（angular2）上侦听窗口事件_Javascript_Jquery_Angular_Typescript

Javascript 在Typescript（angular2）上侦听窗口事件

javascript jquery angular typescript

Javascript 在Typescript（angular2）上侦听窗口事件,javascript,jquery,angular,typescript,Javascript,Jquery,Angular,Typescript,我正在尝试从angular2应用程序中收听窗口上的事件，该应用程序是用typescript编写的。我还使用jquery（通过打字添加）我想要收听的事件是由一个外部库添加的，我在index.html上的标记中添加了这个库。如果我在index.html上的窗口上添加了一个侦听器，它工作正常： <!doctype html> <html> <head> <meta charset="utf-8"> <script src="h

我正在尝试从angular2应用程序中收听

窗口上的事件，该应用程序是用typescript编写的。我还使用jquery（通过打字添加）
我想要收听的事件是由一个外部库添加的，我在index.html上的
标记中添加了这个库。如果我在index.html上的窗口
上添加了一个侦听器，它工作正常：
<!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>


Angular 2应用程序| ng2网页包
//这个有用！！
$（窗口）.on（'authenticatedUser'，函数（e）{
console.log（'ok'）；
});
加载。。。

但如果我尝试在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) { }
}

从'@angular/core'导入{Component，OnInit}；
从“@angular/ROUTER”导入{ROUTER_DIRECTIVES}”；
从“./shared”导入{ApiService}；
导入“../style/app.scss”；
/*
*应用程序组件
*顶级组件
*/
@组成部分({
选择器：'我的应用'，//
提供者：[ApiService]，
指令：[……路由器指令]，
templateUrl:“./app.component.html”，
样式URL:['./app.component.scss']，
})
导出类AppComponent实现OnInit{
url='1〕https://github.com/preboot/angular2-webpack';
恩戈尼尼特（）{
//这似乎不起作用，我从来没有收到过任何通知
//“窗口”上的“authenticatedUser”事件`
$（（窗口））.on（'authenticatedUser'，函数（e）{
console.log（'fuuuu'）；
});
//这将触发“窗口”上的事件`
（窗口）.myNamespace.start({
scopeName:null，
坎克洛斯：错，
returnUrl:'http://localhost:8080/loggedIn'
});
}
构造函数（私有api:ApiService）{}
}

这是从angular2应用程序中将事件处理程序附加到窗口的正确方法吗？我觉得一定有更好的办法
这是从angular2应用程序中将事件处理程序附加到窗口的正确方法吗
如果它在JavaScript中工作，那么它应该在TypeScript中工作。所以我将要向你们展示的不会解决这个问题
但是，不要像angular建议的那样去听窗口事件
host: {
    '(window:resize)': 'onResize($event)'
}

你试过HostListener吗？？