Question

我尝试使用带有Angular 4/2的Codemirror来简单地更改标签内某个单词的颜色（请参阅app.component.html）。我能够在Angular 4中实现Codemirror并设置一些简单的配置，但文档没有解释如何在Angular 4中进行更复杂的配置（比如更改单词的颜色）。我的代码：

的index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Codemirror</title>
  <base href="/">
  <link rel="stylesheet" href="https://npmcdn.com/codemirror@5.24.0/lib/codemirror.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';
import { CodemirrorModule } from 'ng2-codemirror';
import { AppComponent } from './app.component';

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

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  config;
  content;
  constructor() {
    this.config = {
      lineNumbers: true,
      mode: 'text/typescript'
    };
    this.content = 'merkel AND trump';
  }

  oninput() {
    console.log('blabla');
  }
}

app.component.html

<h1>Codemirror sample with Angular 2</h1>
<div style="border: 1px solid black">
  <codemirror [(ngModel)]="content" [config]="config" (input)="oninput()"></codemirror>
</div>

正如你所看到的，最初的字符串是＆＃34; merkel AND trump＆＃34; （用于测试目的）。如何在角度4中配置Codemirror以更改每个单词的颜色＆＃34; AND＆＃34; ？我不知道如何继续使用带有角色4的打字稿，所以我很感激任何帮助。

致以最诚挚的问候，

马科斯

Codemirror使用Angular 2/4更改TEXT颜色

0 个答案: