Я пытаюсь связать codemirror с Angular 2 (TypeScript). Прямо сейчас я могу отображать CodeEditor с помощью пользовательской директивы codearea, которая динамически загружает файл сценария и форматирует текстовую область.

Я не могу получить значение, пользователь вводит текстовую область, я пробовал NgModel, значение и т. Д. Я думаю, что codemirror удаляет текстовую область и вставляет ее снова, что может вызвать ошибку.

Я пытался использовать обработчики событий onchange и keyup, но они неоднократно вызываются, когда что-либо вводится в текстовую область. Так что это бесполезно.

Вот код компонента кода области:

import {Component, AfterViewChecked,AfterViewInit} from 'angular2/core';

@Component({
    selector: 'code-area',
    template: `
    <input [(ngModel)]="ic_code">
    <textarea [(ngModel)]="ic_code" id='problem2' name='problem2' rows='10' cols='80'>

    </textarea>
    <div>
    <textarea [(ngModel)]="ic_code" id='problem1' name='problem2' rows='10' cols='80'>
    int main(){

    }
    </textarea>
    </div>
    <button (click)="submit_clicked()">Submit</button>
    <input [(ngModel)]="ic_code">
    `
})
export class CodeArea implements AfterViewInit,AfterViewChecked{
    public ic_code;
    public ic_code2;
    public ic_codediv;
    constructor(){
        this.ic_code = "";
        System.import('app/applycodemirror')
            .then(refToLoadedScript => {
                applycodestyle();
            });
    }

    ngAfterViewInit(){
        console.log("AFter view init called in CodeArea");
    }
    ngAfterViewChecked(){

    }
    onChange(){
        //This is being repeatedly called
    }
    submit_clicked() {
        //I need the code here ,when user clicks on submit
    }
    onKey(event: any) {
        console.log(event.target.value+' ');
    }

}

Вот внешний файл JS

function applycodestyle(){
      if(document.getElementById("problem1") != null){
        console.log("Problem 1 present");
        var cEditor = CodeMirror.fromTextArea(document.getElementById("problem1"), {
          lineNumbers: true,
          matchBrackets: true,
          mode: "text/x-csrc",
        });
      }else{
        console.log("Problem 1 null");
      }
}