debounceTime到CodeMirror角

Question

我已经尝试了多个变体，也是在这个可能的Dup之后

使用ng2-codemirror 1.1.3库+ codemirror 5.33.0锚点

我所要做的就是将一个DebounceTime操作符附加到CodeMirror编辑器的change事件中

html：

<codemirror #cm [(ngModel)]="code" [config]="config" (focus)="onFocus()" (blur)="onBlur()"></codemirror>

ts：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';

@ViewChild('cm') editor;

ngAfterViewInit() {
  const watch = Observable.fromEvent(this.editor, 'change'); // <--- Error
  watch.subscribe(v => console.log(v));
}

我得到的错误是：

错误TypeError:无效事件目标

我还尝试将Observable.fromEvent附加到this.editor.value/ this.editor.input

编辑整个组件: component.HTML：

<codemirror #cm [(ngModel)]="code" [config]="config" (focus)="onFocus()" (blur)="onBlur()"></codemirror>

component.TS：

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { global } from '../shared/global.constants';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/scroll/simplescrollbars';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint.js';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit, AfterViewInit {
  @ViewChild('cm') editor;
  @ViewChild('output') output;
  code = global.code;
  config = {
    lineNumbers: true,
    mode: {name: 'javascript', json: true},
    tabSize: 2,
    scrollbarStyle: 'simple',
    extraKeys: {'Tab': 'autocomplete', 'Ctrl-Space': 'autocomplete'}
  };

  constructor() {

  }

  ngOnInit() {

  }

  ngAfterViewInit() {
    console.log(this.editor); // <--- CodemirrorComponent {change: EventEmitter, focus: EventEmitter, blur: EventEmitter, cursorActivity: EventEmitter, instance: CodeMirror$1, …}
    console.log(this.editor.nativeElement); // <--- undefined
    const watch = Observable.fromEvent(this.editor.host.nativeElement, 'input');
    console.log(watch);
    watch.subscribe(w => console.log(w)); // <-- invalid target
  }
}

Answer 1

考虑到<codemirror>是一个组件，@ViewChild('cm') editor查询组件类的实例，而@ViewChild('cm') editor: ElementRef只是欺骗类型系统，但不影响editor值。

正如参考文献解释的那样，read属性用于指定应该查询哪个令牌。为了强制它成为ElementRef，它应该是：

@ViewChild('cm', { read: ElementRef }) editor: ElementRef;

然后可以将事件侦听器添加到DOM元素中(另一个答案已经解释了)：

const watch = Observable.fromEvent(this.editor.nativeElement, 'change');

Answer 2

Passon元素(nativeElement)到Observable.fromEvent方法。

ngAfterViewInit() {
  const watch = Observable.fromEvent(this.editor.nativeElement, 'change');
  watch.subscribe(v => console.log(v));
}