Javascript 观察到的事件不在角度2下工作_Javascript_Html_Typescript_Angular

Javascript 观察到的事件不在角度2下工作

javascript html typescript angular

Javascript 观察到的事件不在角度2下工作,javascript,html,typescript,angular,Javascript,Html,Typescript,Angular,我试图在angular2中创建一个Keyup事件，当在搜索框中键入某个内容时触发该事件，然后将该事件记录在控制台中。无论控制台中是否显示任何内容。这是我的app.component.ts文件 /// <reference path="../typings/tsd.d.ts" /> import {Component} from '@angular/core'; import {Observable} from 'rxjs/Rx'; @Component({ selector: '

我试图在angular2中创建一个Keyup事件，当在搜索框中键入某个内容时触发该事件，然后将该事件记录在控制台中。无论控制台中是否显示任何内容。这是我的app.component.ts文件

/// <reference path="../typings/tsd.d.ts" />

import {Component} from '@angular/core';
import {Observable} from 'rxjs/Rx';

@Component({
selector: 'my-app',
template: `
    <input id="search" type="text" class="form-control"     placeholder="Search">

`
})
export class AppComponent {
constructor(){


    var keyups = Observable.fromEvent($("#search"), "keyup");


    keyups.subscribe(function(data) {

        console.log(data);
    });
}}

我的index.html文件是

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Latest compiled and minified CSS -->
<!-- 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-->

<link rel="stylesheet" href="app/bootstrap.min.css">
<link rel="stylesheet" href="app/styles.css">


<!-- 1. Load libraries -->
 <!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script src="node_modules/rxjs/bundles/Rx.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
  System.import('app').catch(function(err){ console.error(err);  });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

请有人指出我这里遗漏了什么？谢谢

您需要将一个事件绑定到输入字段，并将输入字段绑定到一个对象，这样做是有角度的

HTML:

然后在你的课堂上：

angular中的双向绑定将自动将输入值绑定到model.name，keyup事件将侦听您想要的事件。

首先，您可以用另一种方式捕获按键：

这会将keyup事件绑定到运行您分配给该事件绑定的内容。然后，可以使用console.log在组件中添加onKeyPress函数

另一件事是构造函数在视图初始化之前运行。因此，如果您坚持绑定到模板之外的事件，可以执行以下操作：

导出类AppComponent实现AfterViewInit

并在组件中实现一个ngAfterViewInit函数，您可以在其中使用该可观察对象。确保从@angular/core导入AfterViewInit

您在构造函数中还没有访问DOM的权限，因此实际上您正在初始化该观察器以侦听空项上的keyup事件。您需要做的是在ngAfterViewInit生命周期钩子中初始化该观察者

ngAfterViewInit(){
    var keyups = Observable.fromEvent($("#search"), "keyup");

    keyups.subscribe(function(data) {
        console.log(data);
    });
}

ngAfterViewInit(){
    var keyups = Observable.fromEvent($("#search"), "keyup");

    keyups.subscribe(function(data) {
        console.log(data);
    });
}