Question

使用Angular8

我已经创建了一个导出其他组件的模块（ChartsModule）。我可以将模块导入app.module.ts文件中，并使用在app.component.html中导出的模板，但是尝试通过使用导入了ChartsModule的模块创建另一个组件来尝试相同的操作。

ChartsModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PieChartComponent } from './pie-chart/pie-chart.component';
import { LinesChartComponent } from './lines-chart/lines-chart.component';
import { TableChartComponent } from './table-chart/table-chart.component';

@NgModule({
  declarations: [PieChartComponent,LinesChartComponent,TableChartComponent],
  imports: [
    CommonModule
  ],
  exports:[PieChartComponent,LinesChartComponent,TableChartComponent]
})
export class ChartsModule { }

在 app.module.ts

内部

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    NgbModule,
    XComponent,
    ChartsModule]

使用 app.component.html;

中的模板

<app-pie-chart></app-pie-chart>
<app-table-chart></app-table-chart>

问题；

如何通过将ChartsModule导入组件X来实现相同的效果。这就是我所做的；生成组件X并添加一个模块，该模块将导入ChartsModule，然后使用x.html中的模板。

x.module.ts

import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from '../data-charts/charts.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ChartsModule
  ],
  // schemas:[CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})

export class XModule { }

在x.component.html内

<app-pie-chart></app-pie-chart>
<app-table-chart></app-table-chart>

我得到了错误；

Uncaught Error: Template parse errors:
'app-pie-chart' is not a known element:
1. If 'app-pie-chart' is an Angular component, then verify that it is part of this module.
2. If 'app-pie-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<router-outlet></router-outlet>

Answer 1

组件X必须是 some 模块的成员。在那里导入ChartsModule。

Answer 2

错误在于您的AppModule导入。您无法导入组件，仅导入具有组件的模块。

在这种情况下，必须将 xComponent 放在 xModule 的declarations: []内，以获取正确的解决方案。

无论如何，如果您想使用带有ChartsModule的组件，则应在其declarations: []中包含ChartsModule的任何模块的imports: []中声明xComponent

希望有帮助！

Answer 3

您必须在XComponent中声明XModule才能获得所需的结果。

x.module.ts

import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from '../data-charts/charts.module';
// Import `XComponent` here.

@NgModule({
  declarations: [XComponent], // Just added reference. 
  imports: [
    CommonModule,
    ChartsModule
  ],
  // schemas:[CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})

export class XModule { }

Answer 4

这是如何解决的；

我将XComponent导入Xmodule，从app.module.ts中删除了XComponent的导入，并在app.module.ts中导入了Xmodule;

xmodule.ts

import { NgModule} from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChartsModule } from '../data-charts/charts.module';
import {XComponent} from './x.component';

@NgModule({
  declarations: [XComponent], 
  imports: [
    CommonModule,
    ChartsModule
  ],
})

export class XModule { }

app.module.ts

  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    NgbModule,
    Xmodule,
    ]

如何在AppComponent之外的其他组件中使用从共享模块导入的角度组件

4 个答案: