Question

我是新手。我想在我的Angular应用程序中编写代码镜像。我使用angular cli创建了一个Angular应用程序。在GitHub上，我找到了Codemirror组件：ngx-codemirror。我严格按照说明进行了操作。我在根项目目录中

npm install @ ctrl / ngx-codemirror @ 2.0.0 codemirror

已执行。我的代码当前如下所示： app / app.module.ts

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

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';

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

app / app.component.ts：

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

const defaults = {
  markdown:
    '# Heading\n\nSome **bold** and _italic_ text\nBy [Scott Cooper](https://github.com/scttcper)',
  'text/typescript':
    `const component = {
  name: "@ctrl/ngx-codemirror",
  author: "Scott Cooper",
  repo: "https://github.com/typectrl/ngx-codemirror"
};
const hello: string = 'world';`,
};

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

  readOnly = false;
  mode = 'markdown';
  options: any = {
    lineNumbers: true,
    mode: this.mode,
  };
  defaults = defaults;

  changeMode() {
    this.options = {
      ...this.options,
      mode: this.mode,
    };
  }

  handleChange($event) {
    console.log('ngModelChange', $event);
  }

  clear() {
    this.defaults[this.mode] = '';
  }
}

app / app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
  <ngx-codemirror
    [options]="options"
    [ngModel]="defaults[mode]"
    [disabled]="readOnly"
    [autoFocus]="true"
    (ngModelChange)="handleChange($event)"
  ></ngx-codemirror>
</ul>

app / app.component.css

@import "~codemirror/lib/codemirror";
@import "~codemirror/theme/material";

但是我看不到该组件。有人可以帮我吗。

Answer 1

您应该在src / main.ts文件中导入编辑器模式：

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app';

import 'codemirror/mode/markdown/markdown';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

并尝试将样式导入angular.json：

 "styles": [
        "./node_modules/codemirror/lib/codemirror.css",
        "./node_modules/codemirror/theme/material.css"
]

带有ngx-codemirror的angular 8

1 个答案: