在 angular 2 中可观察到，数据未记录到控制台

Question

以下代码没有将数据记录到控制台 windows 也没有抛出任何异常并且 Transpiler 也没有显示任何错误，我正在努力angular 2.0.0-beta.7 4 小时以来，我一直在寻求解决这个问题，但一直找不到解决方案。

app.component.ts低于

import {Component} from "angular2/core";
import {Observable} from "rxjs/Rx";


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

})

export class AppComponent {
   constructor() {
      var keyups = Observable.fromEvent($("#search"), "keyup");

       keyups.subscribe(data => console.log(data));
     }
}

index.html

<html>
  <head>
     <title>Angular 2 QuickStart</title>
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
     <link rel="stylesheet" href="app/styles.css">
  <!-- 1. Load libraries -->
  <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"> </script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('app/boot')
            .then(null, console.error.bind(console));
</script>
</head>

<!-- 3. Display the application -->
    <body>
     <my-app>
       Loading...
     </my-app>

    </body>
  </html>

tsconfig.json

{
  "compilerOptions": {
  "target": "es5",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
},
 "exclude": [
 "node_modules",
 "typings/main",
 "typings/main.d.ts"
  ]
}

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
   "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install"
  },
   "license": "ISC",
   "dependencies": {
   "angular2": "2.0.0-beta.7",
   "bootstrap": "^3.3.6",
   "es6-promise": "^3.0.2",
   "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.2",
  "systemjs": "0.19.22",
  "zone.js": "0.5.15"
 },
  "devDependencies": {
   "concurrently": "^2.0.0",
   "lite-server": "^2.1.0",
  "typescript": "^1.7.5"
  }
}

Answer 1

您可以在组件的 ngAfterViewInit 方法中使用您的代码而不是其构造函数。

有关详细信息，请参阅此 link：https://angular.io/docs/ts/latest/api/core/AfterViewInit-interface.html。

您还可以利用 ViewChild 装饰器，如下所述：

import {Component, ViewChild} from "angular2/core";
import {Observable} from "rxjs/Rx";


@Component({
selector: 'my-app',
template: ` 
          <input #search type="text" class="form-control">
          `
})
export class AppComponent {
   @ViewChild('search')
   search:ElementRef;

   ngAfterViewInit() {
      var keyups = Observable.fromEvent(this.search.nativeElement, "keyup");

       keyups.subscribe(data => console.log(data));
     }
}

Answer 2

Thierry 的回答对我有用，但 ElementRef 不应该也被导入吗？

import {Component, ViewChild, ElementRef} from 'angular2/core';

Answer 3

很遗憾地告诉您，相同的代码适用于 "rxjs": "5.0.0-beta.0"

package.json

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}

在 angular 2 中可观察到，数据未记录到控制台

Observable in angular 2, data is not logging to the console

observable

angularjs

reactivex

angular