Javascript 去BounceTime to CodeMirror Angular

我已经尝试了多种变化也如下

使用ng2 codemirror 1.1.3lib+

codemirror 5.33.0

锚定

我所要做的就是在CodeMirror编辑器的

change

事件中附加一个DebounceTime操作符

html:

组件1.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
  }
}

从'@angular/core'导入{AfterViewInit，Component，ElementRef，OnInit，ViewChild}；
从“../shared/global.constants”导入{global}；
导入“codemirror/mode/javascript/javascript”；
导入“codemirror/addon/scroll/simplescrollbars”；
导入“codemirror/addon/hint/javascript hint”；
导入“codemirror/addon/hint/show hint.js”；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/fromEvent”；
导入'rxjs/add/operator/debounceTime'；
@组成部分({
选择器：'应用程序主'，
templateUrl:'./main.component.html'，
样式URL:['./main.component.scss']
})
导出类MainComponent实现OnInit，AfterViewInit{
@ViewChild（“cm”）编辑器；
@ViewChild（“输出”）输出；
代码=global.code；
配置={
行号：对，
模式：{name:'javascript'，json:true}，
tabSize:2，
scrollbarStyle:'简单'，
外键：{'Tab'：'autocomplete'，'Ctrl Space'：'autocomplete'}
};
构造函数（）{
}
恩戈尼尼特（）{
}
ngAfterViewInit（）{
console.log（this.editor）；//Passon元素（
nativeElement
）到方法

考虑到
是一个组件，
@ViewChild（'cm'）editor
查询组件类的一个实例，而
@ViewChild（'cm'）editor:ElementRef
只会欺骗键入系统，但不会影响
editor
的值

如前所述，
read
属性用于指定应查询的令牌。为了强制将其设置为
ElementRef
，它应该是：

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

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

嘿。尝试过了，还是一样的错误。甚至继续添加了
@ViewChild（'cm'）编辑器：ElementRef；
，如链接I中所示attached@estus.我理解：）请查看编辑-我添加的日志（
this.editor.nativeElement
返回
未定义的
）@OmerShukar它没有说明
这个编辑器等于什么。这个问题不包含整个组件，只包含片段，所以
#cm
是否真的存在于组件模板中并不明显。您可能有一个错误，这就是为什么在解决问题时必不可少的原因。@estus添加了完整的component@OmerShukar做
#cm
/
codemirr
属于
main.component.html
？
const watch=Observable.fromEvent（this.editor.nativeElement，'input'）；watch.debounceTime（200）.subscribe（e=>{console.log（this.editor.nativeElement.innerText）；}）
Works-太棒了！！非常感谢您和@PankajParkar！！！这是一个有趣的问题。我将对此进行更多调查，感谢@estus指出这一点。不客气。@PankajParkar Sure.IIRC，默认情况下为字符串查询（模板变量名）为常规元素和指令返回ElementRef，但为组件返回类实例，因此尽可能使用显式
读取
是一种很好的做法。这对vanilla js有解决方案吗？我不是Angular，我无法理解它。有人能解释一下吗？@Rehan问题和答案都非常针对ng2 codemirror，而不是一般的CodeMirror。RxJS Observable不是Angular独有的，但在这里使用，因为它们可以很好地协同工作，对于vanilla JS，您可能不需要它。我建议问一个新问题，详细解释您的问题。
<codemirror #cm [(ngModel)]="code" [config]="config" (focus)="onFocus()" (blur)="onBlur()"></codemirror>

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
  }
}

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

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

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