2016-08-09 3 views
1

Я пытаюсь прослушивать события на window из приложения углового2, написанного на машинописном машинописном тексте. Я также использую jquery (добавлен через typings).Прослушивание событий окна на машинописном (angular2)

События, которые я хочу прослушать, добавляются внешней библиотекой, которую я добавляю в теги <script> на index.html. Если добавить слушателя window на 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> 

Но если я стараюсь слушать те же события из моей 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? Я чувствую, что должен быть лучший способ.

+0

вы пытались HostListener ?? –

ответ

1

Это правильный способ подключения обработчиков событий к окну изнутри angular2 приложения

Если он работает в JavaScript, он должен работать в машинописи. Так что я собираюсь показать вам, это не исправит.

Однако не слушает окно событий, как, что, как угловатые рекомендую что-то вроде

host: { 
    '(window:resize)': 'onResize($event)' 
} 
Смежные вопросы