如何正确地将 Codemirror 库连接到 Angular 5？答案

【问题标题】：How to properly connect the Codemirror library to Angular 5?如何正确地将 Codemirror 库连接到 Angular 5？
【发布时间】：2018-05-24 11:36:55
【问题描述】：

这里有文档http://codemirror.net 对于 Angular https://www.npmjs.com/package/ng2-codemirror 已安装 1) npm install ng2-codemirror 2) npm 安装代码镜像 3) 在 app.module.ts 中

import { CodemirrorModule } from 'ng2-codemirror';
@NgModule({
  // ...
  imports:      [
    CodemirrorModule
  ],
  // ...
})

4) 在 .angular-cli.json 中

  "styles": [
    "../node_modules/codemirror/lib/codemirror.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/codemirror/lib/codemirror.js"
  ],

5) 而不是 textarea 写的

<codemirror
  *ngIf="chaptersService.currentChapter" 
  [(ngModel)]="chaptersService.currentChapter.novel"
  [config]="{lineNumbers: true}"
  autofocus
  (keyup)="markAsEdited()"
  #textareaNovel>
</codemirror>

类是从 Codemirror 应用的，但我无法输入文本。我做错了什么？

【问题讨论】：

标签： javascript angular codemirror

【解决方案1】：

请把 ng-if 移到上面的一个 div 中，不要使用标签，使用 [autofocus]=true 并去掉最后一个 #

 <div *ngIf="chaptersService.currentChapter">
    <codemirror 
      [(ngModel)]="chaptersService.currentChapter.novel"
      [config]="{lineNumbers: true}"
      [autofocus]=true
      (keyup)="markAsEdited()">
    </codemirror>
</div>

【讨论】：