javascript - Kan inte binda till 'highlight' eftersom det inte är en känd egenskap hos 'code'

Jag försöker använda ngx-highlightjs och jag har följande kod i modulfilerna. Jag har flera moduler och importerar därför HighlightModule i den modul där markeringsfunktionen behövs. Så följande kod finns inte i App Module.

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')
        }
      }
    }
  ],
})

och i komponentmallen har jag koden så här:

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

Nu får jag följande fel och utdata visas inte:

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

Hur kan jag fixa detta?

Svar #1

Tänk också på att lägga till HighlightModule i din komponents modul

myCompo.module.ts :

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

Svar #2

Jag tror problemet är relaterat till att Angular inte ser det inbyggda JavaScript-biblioteket som i det här fallet är highlight.js. Eftersom highlight-attributet är en direktiv som definieras av highlight.js

Jag hade också samma problem. Och löste problemet genom att följa dessa steg.

1- Jag installerade highlight.js manuellt i projektkatalogen.

npm install highlight.js

2- la till följande rader i skript- och stilavsnitten i filen angular.json.

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

Relaterade artiklar