到 CodeMirror 的 debounceTime Angular

Question

我已经在

之后尝试了多种变体

使用 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));
}

我得到的错误是：

ERROR TypeError: Invalid event target

我也试过将 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, …}
    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

将元素 (nativeElement) 传递给 Observable.fromEvent 方法。

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

Answer 2

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

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

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

然后可以将事件侦听器添加到 DOM 元素（正如另一个答案已经解释的那样）：

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

到 CodeMirror 的 debounceTime Angular

debounceTime to CodeMirror Angular

javascript

codemirror

rxjs

typescript

angular