我目前正在 highcharts-angular 上练习，我遇到了这个问题（详情如下）

Question

我确实只有 app.component.html 有问题。我已成功 imported/install 我工作站中所有必需的库。以下是我正在练习的代码。我目前的 IDE 是 VS 代码。但是出现这个问题：

无法绑定到 'Highcharts'，因为它不是 'highcharts-chart' 的已知属性。 1. 如果 'highcharts-chart' 是一个 Angular 组件并且它有 'Highcharts' 输入，那么验证它是这个模块的一部分。 2. 如果 'highcharts-chart' 是 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到此组件的“@NgModule.schemas”以抑制此消息。 3. 要允许任何属性添加 'NO_ERRORS_SCHEMA' 到此 component.ngtsc(-998002) 的 '@NgModule.schemas' app.component.ts(5, 50): 组件AppComponent模板错误

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighchartsChartComponent } from 'highcharts-angular';

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

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },
      subtitle: {
         text: "Source: WorldClimate.com"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Temperature °C"
         } 
      },
      tooltip: {
         valueSuffix:" °C"
      },
      series: [{
         name: 'Tokyo',
         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
      },
      {
         name: 'New York',
         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
      },
      {
         name: 'Berlin',
         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
      },
      {
         name: 'London',
         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
      }]
   };
}

app.component.html

<h1>FIRST</h1>
<highcharts-chart
[Highcharts] = "highcharts" 
[options] = "chartOptions" 
style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>
<router-outlet></router-outlet>

Answer 1

在您的 app.module.ts 中，您需要导入 HighchartsChartModule 而不是 HighchartsChartComponent

...
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  imports: [
    ...
    HighchartsChartModule
  ]

我目前正在 highcharts-angular 上练习，我遇到了这个问题（详情如下）

I'm currently practicing on highcharts-angular and I have this problem (details below)

highcharts

angular

angular-highcharts