Angular 5集成CodeMirror库后无法输入文本，该如何解决？

问题重现 #

你已经按以下步骤在Angular 5中集成CodeMirror：

• 执行npm install ng2-codemirror与npm install codemirror安装依赖
• 在app.module.ts中导入CodemirrorModule并添加到imports数组
• 在.angular-cli.json中配置了CodeMirror的样式和脚本文件
• 在组件模板中使用<codemirror>标签替代textarea，绑定了ngModel和相关事件

目前样式正常，但编辑器无法输入文本。

可能的原因与解决方法 #

1. 缺少FormsModule（最常见原因）

使用[(ngModel)]双向绑定需要Angular的FormsModule支持，你的步骤中没有提到导入这个模块，这很可能是导致无法输入的关键问题。

修改app.module.ts，添加FormsModule的导入：

import { FormsModule } from '@angular/forms';
import { CodemirrorModule } from 'ng2-codemirror';

@NgModule({
  // ...
  imports: [
    FormsModule, // 必须添加这一行
    CodemirrorModule
  ],
  // ...
})
export class AppModule { }

2. 绑定的ngModel值未初始化

如果chaptersService.currentChapter.novel是undefined或null，CodeMirror可能无法正常初始化输入功能。在组件的初始化钩子中确保该值存在：

import { Component, OnInit } from '@angular/core';
import { ChaptersService } from './path-to-your-service';

@Component({
  // ...
})
export class YourComponent implements OnInit {
  constructor(private chaptersService: ChaptersService) {}

  ngOnInit() {
    // 确保currentChapter存在，且novel初始化为空字符串
    if (!this.chaptersService.currentChapter) {
      this.chaptersService.currentChapter = { novel: '' };
    } else if (!this.chaptersService.currentChapter.novel) {
      this.chaptersService.currentChapter.novel = '';
    }
  }
}

3. 依赖版本不兼容（Angular 5适配问题）

Angular 5属于较旧版本，最新的ng2-codemirror和codemirror可能不兼容。需要安装适配的版本：

# 先卸载现有依赖
npm uninstall ng2-codemirror codemirror

# 安装适配Angular 5的版本
npm install ng2-codemirror@2.0.0 codemirror@5.65.12 --save

4. .angular-cli.json路径配置错误

检查样式和脚本的路径是否正确，Angular CLI 1.x（对应Angular 5）中，路径可能不需要../，尝试修改为：

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

5. 模板中*ngIf的渲染时机问题

*ngIf会完全移除/添加DOM元素，可能导致CodeMirror实例初始化异常。可以尝试改用[hidden]（仅隐藏而非移除）测试，或者确保currentChapter在组件初始化时就已存在。

测试步骤 #

1. 优先检查FormsModule是否导入，这是最容易忽略的点
2. 确认绑定的ngModel值已初始化为空字符串
3. 如果以上都没问题，再尝试调整依赖版本和路径配置

内容的提问来源于stack exchange，提问作者Oleg Zinchenko