Question

我正试图在一个用打字稿写的angular2应用程序中听window上的事件。我也在使用jquery（通过typings添加）。

我想要收听的事件是由我在index.html上的<script>标签中添加的外部库添加的。如果我在index.html上的window上添加一个监听器，它就可以了：

<!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) { }
}

这是从angular2应用程序中将事件处理程序附加到窗口的正确方法吗？我觉得必须有更好的方法。

Answer 1

这是从angular2 app
中将事件处理程序附加到窗口的正确方法吗？

如果它在JavaScript中有效，它应该在TypeScript中工作。所以我要向你展示的不会解决这个问题。

然而，不要听像像

这样的角度推荐的窗口事件

host: {
    '(window:resize)': 'onResize($event)'
}

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

1 个答案: