CodeMirror编辑器在angular2中重复显示

Question

模态是一个子组件，在单击按钮时加载。我在子组件的ngOnInit（）方法中初始化Code​​Mirror编辑器。

这是我的代码：

 ngOnInit(): void {

         this.paramPrevious();

     }



 paramPrevious() {
        if (this.appConfigModelTemp.configParams !== null) {
            this.configParams = this.appConfigModelTemp.configParams;
        } else {
            this.configParams = [];
        }

        if (this.appConfigModelTemp.content === undefined || 
                this.appConfigModelTemp.content === null) {
            this.configModule = '';
        }else {
            this.configModule = this.appConfigModelTemp.content;
        }
        let content = this.configModule;
        if (this.cm !== null) {
            this.cm.toTextArea();
            this.cm = null;
        }
        $('#peizhi1').modal('show');
        $('#peizhi1').on('shown.bs.modal', () => {
            if (this.cm == null) {
                this.initCM();
            }
            this.cm.setValue(content);
        });
        this.paramsTypes = ['String', 'number'];
        this.resultMsg = '';
    }

initCM() {
            this.cm = CodeMirror.fromTextArea(document.getElementById('codeId'), {
                placeholder: this.codeMirroPlaceHolder,
                mode: {
                    name: 'text/html',
                    version: 3,
                    singleLineStringErrors: false
                },
                lineNumbers: true,
                indentUnit: 4,
                matchBrackets: true,
                theme: 'abcdef',
                fullScreen: true
            });
            this.cm.setSize('458px', '487.5px');
    }

当我再次显示模态（如上图）时，

CodeMirror重复显示。我猜这是ngOnInit（）方法的问题。我该怎么办？