javascript - 'code' öğesinin bilinen bir özelliği olmadığı için 'highlight' özelliğine bağlanılamıyor

ngx-highlightjs kullanmaya çalışıyorum ve modül dosyasında aşağıdaki koda sahibim. Birden fazla modülüm var ve bu nedenle vurgulama işlevinin gerekli olduğu modülde HighlightModule'ü ithal ediyorum. Bu nedenle aşağıdaki kod App Modülü'nde değil.

import { HighlightModule, HIGHLIGHT_OPTIONS, HighlightOptions} from 'ngx-highlightjs';

@NgModule({
  declarations: [
    EnvironmentComponent,
    RepositoryComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    HighlightModule
  ],
  providers: [
    EnvironmentService,
    AuthService,
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript'),
          css: () => import('highlight.js/lib/languages/css'),
          xml: () => import('highlight.js/lib/languages/xml')
        }
      }
    }
  ],
})

ve bileşen şablonunda, şöyle bir kodum var :

<pre><code [highlight]="fileData" (highlighted)="onHighlight($event)"></code></pre>

Şimdi aşağıdaki hatayı alıyorum ve çıktı görünmüyor:

 Can't bind to 'highlight' since it isn't a known property of 'code'

Bunu nasıl düzeltebilirim?

Cevap #1

Ayrıca HighlightModule'u bileşeninizin modülüne eklemeyi düşünün

myCompo.module.ts :

import { HighlightModule } from 'ngx-highlightjs';    
imports: [
    ....
    HighlightModule,

Cevap #2

Bence sorun, Angular'ın bu durumda highlight.js olan yerel JavaScript kütüphanesini görmemesiyle ilgili. Çünkü highlight özniteliği highlight.js tarafından tanımlanan bir yönergedir.

Benim de aynı problemim vardı. Ve bu adımları izleyerek sorunu çözdüm.

1- highlight.js'i proje dizinine manuel olarak kurdum.

npm install highlight.js

2- angular.json dosyasındaki scripts ve styles bölümlerine aşağıdaki satırlar eklendi.

    "styles":[ 
     "./node_modules/highlight.js/styles/default.css"
     ],
    "scripts": [
     "./node_modules/highlight.js/lib/highlight.js"
    ]

İlgili makaleler