無法綁定到“highlight”，因為它不是“code”的已知屬性

Question

我正在嘗試使用ngx-highlightjs ，並且模塊文件中有以下代碼。 我有多個模塊，因此我在需要突出顯示功能的模塊中導入了 HighlightModule。 所以下面的代碼不在 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')
        }
      }
    }
  ],
})

在組件模板中，我有這樣的代碼：

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

現在我收到以下錯誤，並且 output 沒有顯示：

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

我怎樣才能解決這個問題？

Answer 1

我認為問題與 angular 沒有看到本機 javascript 庫有關，在這種情況下是 highlight.js。 因為 highlight 屬性是由 highlight.js 定義的指令

我也有同樣的問題。 並按照以下步驟解決了該問題。

1-我在項目目錄中手動安裝了 highlight.js。

npm install highlight.js

2- 在 angular.json 文件中的腳本和 styles 部分中添加了以下行。

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