无法绑定到“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"
    ]