角度 2 中的 Observables 和事件问题答案

【问题标题】：Observables and events issue in angular 2角度 2 中的 Observables 和事件问题
【发布时间】：2016-10-04 03:30:54
【问题描述】：

谁能告诉我为什么这不起作用？

我目前正在学习关于 Angular 的课程，自从课程制作以来，讲师就更新问题让我们陷入了困境......我正在讨论 observables 的主题，这是不是的代码工作。

import {Component, ElementRef} from 'angular2/core'
import {Observable} from 'rxjs/Rx'

import 'rxjs/add/operator/map'

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

export class AppComponent {
    constructor(private _elementRef: ElementRef) {
        var elem = document.querySelector('#search');
        var keyups = Observable.fromEvent(elem, "keyup")
            .map(e => e.target.value)
            .filter(text => text.length >= 3);

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

这不会向控制台输出任何内容，也不会提供任何错误。

我在这里做错了什么？

****编辑****

在提取我的讲师代码并重新运行所有内容后，我确信这是 rxjs 的版本问题。在这个版本中，我不再需要包含：

import 'rxjs/add/operator/map'

当我编写以下代码时，它可以正常工作并按预期输出到控制台。

/// <reference path="../typings/tsd.d.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")
            .map(e => e.target.value)
            .filter(text => text.length > 3);

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

当我在调试器中暂停应用并查看 keyups 时，它确实具有该元素。

出于好奇，这里是我和导师都在使用的 html。

<html>

  <head>
    <title>Angular 2 QuickStart</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"></style>
    <link rel="stylesheet" href="app/styles.css">
    <style>
        body { padding: 30px; }
    </style>
    <!-- 1. Load libraries -->
    <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 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>
      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>

【问题讨论】：

尝试将其放入ngOnInit。我假设您在调试器中对此进行了调试。当您在var keyups 行上设置断点并检查getElementById('search") 时，您会看到什么？
一个建议：直接从组件访问 DOM 是一种不好的做法，也许您应该使用 ElementRef 编写指令来操作 DOM。
我不认为 onload 是问题，请参阅编辑后的帖子。
@CodeBuster 感谢您的洞察力。我理解这一点，但由于这是一门 Angular 2 课程，所以我一直遵循教练的指导直到这一点。我确信这是最佳实践，但为了简单起见，我认为他只是将代码放入组件中。没有把握。我一定会牢记这一最佳做法。
很酷的只是一个建议 :)

标签： reactjs angular rxjs

【解决方案1】：

在您的代码中，elem 将等于 null。

我认为您应该将代码移至ngAfterViewInit 挂钩。它作为组件的“加载”。

另见

Lifecycle Hooks

Plunker

【讨论】：