Angular CLI的SQL Viewer + Editor

Question

我正在尝试找到一个解决方案，使我能够在Angular 5/6 CLI应用程序中进行良好的渲染+编辑SQL。

是否有任何已知的组件或解决方案/方法来实现此目的？

Answer 1

这里是角度cli的步骤，例如角度5：

安装

<强> 1。安装依赖

npm install --save @types/codemirror
npm install --save codemirror

<强> 2。导入参考

import * as CodeMirror from 'codemirror';
import 'codemirror/mode/sql/sql.js';
import { WindowRef } from './WindowRef';

还将样式codemirror/lib/codemirror.css导入.angular-cli.json：

"styles": [
     "styles.css",
     "codemirror.css"
 ],

最后放了代码镜像：

  CodeMirror.fromTextArea(document.getElementById('code'), {
    mode: mime,
    indentWithTabs: true,
    smartIndent: true,
    lineNumbers: true,
    matchBrackets : true,
    autofocus: true,
    extraKeys: {"Ctrl-Space": "autocomplete"},
    hintOptions: {tables: {
      users: ["name", "score", "birthDate"],
      countries: ["name", "population", "size"]
    }}
  });

完整代码

<强> 1。 app.component.ts

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import * as CodeMirror from 'codemirror';
import 'codemirror/mode/sql/sql.js';
import { WindowRef } from './WindowRef';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app';
  @ViewChild('myEditor') myEditor;

  constructor(private winRef: WindowRef) {
  }

  ngAfterViewInit() {
    const mime = 'text/x-mariadb';
    const currentWindow = this.winRef.nativeWindow;
    // get mime type
    // if (currentWindow.location.href.indexOf('mime=') > -1) {
    //   mime = currentWindow.location.href.substr(currentWindow.location.href.indexOf('mime=') + 5);
    // }
    currentWindow.editor = CodeMirror.fromTextArea(this.myEditor.nativeElement, {
      mode: mime,
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      // matchBrackets: true,
      autofocus: true,
      extraKeys: { 'Ctrl-Space': 'autocomplete' },
      // hintOptions: {
      //   tables: {
      //     users: ['name', 'score', 'birthDate'],
      //     countries: ['name', 'population', 'size']
      //   }
      // }
    });
  }
}

<强> 2。 app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <form>
    <textarea id="code" name="code" #myEditor>
      -- SQL Mode for CodeMirror
      SELECT SQL_NO_CACHE DISTINCT
        @var1 AS `val1`, @'val2', @global.'sql_mode',
        1.1 AS `float_val`, .14 AS `another_float`, 0.09e3 AS `int_with_esp`,
        0xFA5 AS `hex`, x'fa5' AS `hex2`, 0b101 AS `bin`, b'101' AS `bin2`,
        DATE '1994-01-01' AS `sql_date`, { T "1994-01-01" } AS `odbc_date`,
        'my string', _utf8'your string', N'her string',
            TRUE, FALSE, UNKNOWN
      FROM DUAL
      -- space needed after '--'
      # 1 line comment
      /* multiline
      comment! */
      LIMIT 1 OFFSET 0;
    </textarea>
  </form>
</div>

第3。 WindowRef.ts

import { Injectable } from '@angular/core';

function _window(): any {
    // return the global native browser window object
    return window;
}

@Injectable()
export class WindowRef {
    get nativeWindow(): any {
        return _window();
    }
}

<强> 4。 app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { WindowRef } from './WindowRef';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [WindowRef],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

您可以尝试https://www.npmjs.com/package/ng2-ace-editor。

  

Ace编辑器与angular 2的typescript集成。

它正在获得一些动力。