如何在 AppComponent 以外的其他組件中使用從共享模塊導入的 Angular 組件

Question

使用 Angular8

我創建了一個導出其他組件的模塊（ ChartsModule ）。 我可以在app.module.ts文件中導入模塊並使用在app.component.html中導出的模板，但是通過使用導入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必須是某個模塊的成員。 ChartsModule那里導入ChartsModule 。

Answer 2

錯誤在於您的 AppModule 導入。 您不能導入組件，只能導入具有組件的模塊。

在這種情況下，你必須把你的xComponent里面declarations: []你xModule的一個正確的解決方案。

無論如何，如果您想使用帶有 ChartsModule 的組件，您應該在declarations: []聲明您的 xComponent declarations: []的任何在其imports: []中具有 ChartsModule 的模塊imports: []

希望能幫助到你！

Answer 3

您必須在XModule聲明XComponent以獲得所需的結果。

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,
    ]