Question

我已按照此链接中建议的方式导入了ngx图：

https://stackblitz.com/edit/swimlane-tree-map-chart?embed=1&file=app/app.component.ts

但是，理想情况下，如果可以的话，我希望将每个图表作为一个单独的组件，因此我将其添加为自己的组件，然后将其导入到称为tab2的页面中。

相关文件如下：

tree-map / tree-map.component.html：

<ngx-charts-tree-map
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [animations]="animations"
  [labelFormatting]="labelFormatting"
  (select)="onSelect($event)">
</ngx-charts-tree-map>

tree-map / tree-map.component.ts

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { single } from './data';

@Component({
  selector: 'app-tree-map',
  templateUrl: './tree-map.component.html',
  styleUrls: ['./tree-map.component.css']
})
export class TreeMapComponent {
  single: any[];
  view: any[] = [700, 400];

  // options
  gradient: boolean = false;
  animations: boolean = true;

  colorScheme = {
    domain: ['#5AA454', '#E44D25', '#CFC0BB', '#7aa3e5', '#a8385d', '#aae3f5']
  };

  constructor() {
    Object.assign(this, { single });
  }

  onSelect(event) {
    console.log(event);
  }

  labelFormatting(c) {
    return `${(c.label)} Population`;
  }
}

tab2.page.ts

import { Component } from '@angular/core';
import { DatabaseService, Emotions } from './../services/database.service';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { TreeMapComponent } from './../components/tree-map/tree-map.component';


@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {

  constructor(
    private db: DatabaseService
  ) {

  }

}

tab2.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab2Page } from './tab2.page';
import { Component } from '@angular/core';
import * as moment from 'moment';
import { DatabaseService, Emotions } from './../services/database.service';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab2Page }]),
    NgxChartsModule,
    BrowserAnimationsModule,
    BrowserModule
  ],
  declarations: [Tab2Page],
  bootstrap: [ Tab2Page ]
})
export class Tab2PageModule {
  arr: String;
  constructor() { }
}

tab2.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <app-tree-map></app-tree-map>
</ion-content>

App.module.ts（已删除，但添加后显示我也正在将其导入：

import { NgxChartsModule} from '@swimlane/ngx-charts'
@NgModule({
  declarations: [AppComponent, ModalComponent],
  entryComponents: [ModalComponent],
  imports: [BrowserModule,
    BrowserAnimationsModule, IonicModule.forRoot(), AppRoutingModule, FontAwesomeModule, MatDialogModule, HttpClientModule, FormsModule, NgxChartsModule],
  providers: [
    StatusBar,
    SplashScreen,
    MatButtonModule,
    MatDialogModule,
    SQLite,
    SQLitePorter
  ],
  bootstrap: [AppComponent]
})

这是我得到的完整错误。据我所知，我不确定为什么要以所有可行的方式导入它。

ERROR in src/app/components/tree-map/tree-map.component.html:1:1 - error NG8001: 'ngx-charts-tree-map' is not a known element:
1. If 'ngx-charts-tree-map' is an Angular component, then verify that it is part of this module.
2. If 'ngx-charts-tree-map' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Answer 1

使用以下命令 npm 安装 要么 npm i @swimlane/ngx-charts@13.0.4

将ngx-charts作为单独的组件导入Angular时出错：错误NG8001：“ ngx-charts-tree-map”不是已知元素

1 个答案: