javascript - CodeMirror Angular için debounceTime

Ben zaten bu Olası Çoğaltmayı takip ederek birden fazla varyasyonu denedim

ng2-codemirror 1.1.3 kütüphanesi + codemirror 5.33.0 kullanarak bağlayıcı

Yapmaya çalıştığım tek şey, CodeMirror Editörünün change olayına bir DebounceTime operatörü eklemektir

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

Aldığım hata şudur:

HATA TypeError: Geçersiz olay hedefi

Observable.fromEvent'i this.editor.value/ this.editor.input'e eklemeyi de denedim

DÜZENLE Tüm Bileşen: component.HTML:

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

bileşen.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
  }
}

Cevap #1

<codemirror> bir bileşen olduğundan, @ViewChild('cm') editor bileşen sınıfının bir örneğini sorgularken, @ViewChild('cm') editor: ElementRef sadece tip sistemini kandırır ama editor değerini etkilemez.

Referansın açıkladığı gibi, read özelliği hangi tokenin sorgulanacağını belirtmek için kullanılır. Bunu ElementRef olarak zorlamak için şunlar yapılmalıdır:

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

O zaman olay dinleyici DOM öğesine eklenebilir (daha önceki bir cevap zaten açıkladığı gibi):

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

Cevap #2

Elementi (nativeElement) Observable.fromEvent metoduna aktarın.

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

İlgili makaleler