Angular2 Componentのcodemirror text areaの値にアクセスするには？

Question

コーデックミラーを角度2（タイプスクリプト）にリンクしようとしています。 今、スクリプトファイルを動的にロードしてテキスト領域をフォーマットするcodeareaカスタムディレクティブを使用してCodeEditorを表示できます。

私は値を取得できません、ユーザーはテキスト領域に入力し、NgModel、valueなどを試しました。codemirrorがtextareaを削除していて、再度挿入すると、エラーが発生する可能性があります。

私は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"); 
     } 
} 

Answer 1

ファイルです。 ngAfterViewInitで Basiaclly私はelementRefを使用してコードミラーインスタンスを作成します。

this.cm = CodeMirror(this.elementRef.nativeElement, options); 

その後、onChangeイベントで：

this.cm.on('change', (editor: CodeMirror.Editor) => { 
    editor.getDoc().getValue(); 
}); 

あなたがのonChangeを使用しない場合、あなたは常にコードから値を取得することができますミラーインスタンス、例えば。あなたはng2-codemirror

systemjs.config.js

npm install ng2-codemirror --save

セットアップ

をインストールし使用することができます

cmInstance.getEditor().getDoc().getValue() 

Answer 2

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    var data = { 
     paths: { 
      // paths serve as alias 
      'npm:': '/node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: '/Template/js/kpxl/app', 

      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 
       'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

      //Add these code mirror packages 
      'ng2-codemirror': 'npm:ng2-codemirror', 
      'codemirror': 'npm:codemirror', 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      codemirror: { 
       main: 'lib/codemirror.js', 
       defaultExtension: 'js' 
      } 
     } 
    }; 
    data.packages['ng2-codemirror'] = { main: 'lib/index.js', defaultExtension: 'js' }; 
    System.config(data); 
})(this); 

使用サンプル

<link href="/node_modules/codemirror/lib/codemirror.css" rel="stylesheet" /> 
<link href="/node_modules/codemirror/theme/ambiance.css" rel="stylesheet" /> 

ページにCodeMirror CSSファイルを含め、あなたのメインモジュールでCodemirrorModuleを含める：

import { CodemirrorModule } from 'ng2-codemirror'; 

@NgModule({ 
    // ... 
    imports:  [ 
    CodemirrorModule 
    ], 
    // ... 
}) 
export class AppModule { } 

---

あなたのComponentに使用してください。

import { Component } from 'angular2/core'; 

@Component({ 
    selector: 'sample', 
    template: ` 
    <codemirror [(ngModel)]="code" 
     [config]="{...}" 
     (focus)="onFocus()" 
     (blur)="onBlur()"> 
    </codemirror> 
    ` 
}) 
export class Sample{ 
    constructor(){ 
    this.code = `// Some code...`; 
    } 
}