javascript - 跨多个模块共享通用/动态组件

Question

我正在尝试获取选择器:数据收集。可以被 ModuleA 和 ModuleB(可能有更多模块)访问，同时还需要基于模块(例如 ModuleA 和 ModuleB)进行路由。但我收到以下错误，代码如下。

Error: Type DataCollectionComponent is part of the declarations of 2 modules: ModuleAModule and ModuleBModule! Please consider moving DataCollectionComponent to a higher module that imports ModuleAModule and ModuleBModule. You can also create a new NgModule that exports and includes DataCollectionComponent then import that NgModule in ModuleAModule and ModuleBModule.

ModuleA.module.ts

@NgModule({
  declarations: [
    ModuleAComponent,
    ModuleACrudComponent,
    DataCollectionComponent,
    CrudModeComponent
  ],
  imports: [
    // CommonModule,
    CdkTableModule,
    MaterialModule,
    ReactiveFormsModule,
    ModuleARoutingModule,
    SharedModule
  ],
  providers: [APIService, GenericResolver, CrudAPIService, CrudModeComponent]
})
export class ModuleA{}

ModuleA-routing.module.ts

const moduleARoutes: Routes = [
  {
    path: '',
    component: ModuleAComponent,
  },
  {
    path: 'create',
    component: ModuleACrudComponent,
  },
  {
    path: 'edit/:id',
    component: ModuleACrudComponent,
    resolve: {
      genericRecord: GenericResolver
    }
  },
  {
    path: 'delete/:id',
    component: ModuleACrudComponent,
  }
];

@NgModule({
  imports: [RouterModule.forChild(moduleARoutes)],
  exports: [RouterModule]
})
export class ModuleARoutingModule {}

ModuleA.component.html

<data-collection
  [path]="url"
  [(columns)]="columnDefinitions"
  [genericForm]="form"
  [genericActionList]="actionList"
>
</data-collection>

ModuleB.module.ts

@NgModule({
  declarations: [
    ModuleBComponent,
    ModuleBCrudComponent,
    DataCollectionComponent
  ],
  imports: [
    // CommonModule,
    CdkTableModule,
    MaterialModule,
    ReactiveFormsModule,
    ModuleBRoutingModule,
    SharedModule
  ],
  providers: [APIService]
})
export class ModuleBModule {}

ModuleB-routing.module.ts

const moduleBRoutes: Routes = [
  {
    path: '',
    component: ModuleBComponent,
  },
  {
    path: 'create',
    component: ModuleBCrudComponent,
  },
  {
    path: 'edit/:id',
    component: ModuleBCrudComponent,
  },
  {
    path: 'delete/:id',
    component: ModuleBCrudComponent,
  }
];

@NgModule({
  imports: [RouterModule.forChild(moduleBRoutes)],
  exports: [RouterModule]
})
export class ModuleBRoutingModule {}

ModuleB.component.html

<data-collection
  [path]="url"
  [(columns)]="columnDefinitions"
  [genericForm]="form"
  [genericActionList]="actionList"
>
</data-collection>

data-table.component.html选择器:数据收集

<!-- <ng-container *ngIf="!isInputDecValueEmpty()"> -->
<div class="mat-elevation-z12">
  <div class="parent-div">
    <div class="child-first-div">
      <mat-form-field class="container-12" appearance="outline">
        <input #globalSearch matInput name="search" />
        <mat-label>Type Here to Search All</mat-label>
        <button
          mat-button
          matSuffix
          mat-icon-button
          aria-label="Clear"
          (click)="searchClear()"
          matTooltip="Reset Your Search Result"
        >
          <mat-icon svgIcon="close"></mat-icon>
        </button>
      </mat-form-field>
      <mat-checkbox #checkBox class="btnShowDeleted" (change)="onChange()">
        Show Deleted Records
      </mat-checkbox>
    </div>
    <div class="child-second-div">
      <button
        *ngIf="genericActionList.canGoCreate"
        mat-raised-button
        color="primary"
        matTooltip="Create New Record"
        (click)="goToAdd()"
      >
        <mat-icon svgIcon="add"></mat-icon>
      </button>
      <button
        *ngIf="genericActionList.canGoCopy"
        mat-raised-button
        color="primary"
        matTooltip="Copy Record"
        (click)="goToCopy()"
      >
        Copy
      </button>
      <button
        *ngIf="genericActionList.canExport"
        mat-raised-button
        color="primary"
        matTooltip="Export to Excel"
        (click)="exportAsXLSX()"
      >
        <mat-icon svgIcon="assignment_returned"></mat-icon>
      </button>
    </div>
  </div>
  <hr />
  <br />

  <!-- <div style="padding: 32px"> -->
  <!-- <div class="example-container mat-elevation-z8"> -->
  <div>
    <div style="overflow: auto;">
      <div class="parent-spinner">
        <div class="spinner-container" *ngIf="loading$ | async">
          <mat-card>
            <mat-spinner color="primary" mode="indeterminate"></mat-spinner>
          </mat-card>
        </div>
        <form [formGroup]="genericForm">
          <table
            #table
            mat-table
            matSortDirection="asc"
            matSortDisableClear
            [dataSource]="dataSource"
            matSort
          >
            <ng-container *ngFor="let col of columns" [cdkColumnDef]="col.def">
              <!-- <mat-header-cell *cdkHeaderCellDef mat-sort-header> -->

              <!-- <ng-container *ngIf="col[0]">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              {{ col.header }}
            </th>
        </ng-container> -->

              <th mat-header-cell *matHeaderCellDef>
                <label
                  ><b mat-sort-header class="header-text">{{
                    col.header
                  }}</b></label
                >
                <div class="header-search-div">
                  <ng-container [ngSwitch]="col.dataType">
                    <ng-container *ngSwitchCase="1">
                      <mat-form-field
                        floatLabel="never"
                        class="mat-form-field-test"
                      >
                        <mat-label class="search-label"
                          >Search {{ col.header }}</mat-label
                        >
                        <input matInput formControlName="{{ col.def }}" />
                      </mat-form-field>
                    </ng-container>

                    <ng-container *ngSwitchCase="2">
                      <mat-form-field
                        floatLabel="never"
                        class="mat-form-field-test"
                      >
                        <mat-label class="search-label"
                          >Search {{ col.header }}</mat-label
                        >
                        <input
                          matInput
                          [matDatepicker]="picker"
                          formControlName="{{ col.def }}"
                        />
                        <mat-datepicker-toggle
                          matSuffix
                          [for]="picker"
                        ></mat-datepicker-toggle>
                        <mat-datepicker #picker></mat-datepicker>
                      </mat-form-field>
                    </ng-container>

                    <ng-container *ngSwitchCase="3">
                      <mat-form-field
                        floatLabel="never"
                        class="mat-form-field-test"
                      >
                        <mat-label class="search-label"
                          >Select Status</mat-label
                        >
                        <mat-select
                          disableRipple
                          formControlName="{{ col.def }}"
                        >
                          <!-- <mat-option value="">None</mat-option> -->
                          <ng-container
                            *ngFor="let ddList of col.option | keyvalue"
                          >
                            <mat-option value="{{ ddList.key }}">
                              {{ ddList.value }}</mat-option
                            >
                            <!-- <mat-option value="3">Amended</mat-option> -->
                          </ng-container>
                        </mat-select>
                      </mat-form-field>
                    </ng-container>

                    <ng-container *ngSwitchCase="4">
                      <mat-form-field
                        floatLabel="never"
                        class="mat-form-field-test"
                      >
                        <mat-label class="search-label"
                          >Select {{ col.header }}</mat-label
                        >
                        <mat-select
                          disableRipple
                          formControlName="{{ col.def }}"
                        >
                          <mat-option>-- Select {{ col.header }} --</mat-option>
                          <ng-container
                            *ngFor="let dropdown of genericDropDown$ | async"
                          >
                            <mat-option [value]="dropdown">
                              {{ dropdown }}
                            </mat-option>
                          </ng-container>
                        </mat-select>
                      </mat-form-field>
                    </ng-container>

                    <ng-container *ngSwitchCase="0">
                      <div style="padding: 10px 0 15px;">
                        <button
                          mat-icon-button
                          matTooltip="Search Record"
                          (click)="mapFilterValues()"
                        >
                          <mat-icon color="primary" svgIcon="search"></mat-icon>
                        </button>
                        <button
                          mat-icon-button
                          matTooltip="Reset Search"
                          (click)="clearIndivSearch()"
                        >
                          <mat-icon color="warn" svgIcon="refresh"></mat-icon>
                        </button>
                      </div>
                    </ng-container>
                  </ng-container>
                </div>
              </th>

              <ng-container *ngIf="col.selectable === true">
                <td mat-cell *matCellDef="let row">
                  <a
                    (click)="goToEdit(row[col.def])"
                    routerLink="edit/{{ row[col.def] }}"
                    >{{ row[col.def] }}
                  </a>
                </td>
              </ng-container>

              <ng-container *ngIf="col.dataType === 2">
                <td mat-cell *matCellDef="let row">
                  {{ row[col.def] | date: 'yyyy-MM-dd hh:mm:ss a' }}
                </td>
              </ng-container>

              <ng-container
                *ngIf="col.def !== enumRecordType && col.def !== 'Action'"
              >
                <td mat-cell *matCellDef="let row">{{ row[col.def] }}</td>
              </ng-container>

              <ng-container *ngFor="let rec of enumRecordType">
                <ng-container *ngIf="col.def === rec">
                  <td mat-cell *matCellDef="let row">
                    {{
                      col.def == 1
                        ? 'New'
                        : row[col.def] === 3
                        ? 'Amended'
                        : row[col.def] == 5
                        ? 'Deleted'
                        : ''
                    }}
                  </td>
                </ng-container>
              </ng-container>
              <!-- <td mat-cell *matCellDef="let row">
                  {{ row[col.def] | date: 'yyyy-MM-dd hh:mm:ss a' }}
                </td> -->
              <ng-container *ngIf="col.def === 'Action'">
                <td mat-cell *matCellDef="let row">
                  <button
                    mat-icon-button
                    matTooltip="Edit Record"
                    (click)="goToEdit(row)"
                  >
                    <mat-icon color="primary" svgIcon="launch"></mat-icon>
                  </button>
                  <button
                    mat-icon-button
                    matTooltip="Delete Record"
                    (click)="goToDelete(row)"
                  >
                    <mat-icon color="warn" svgIcon="delete_outline"></mat-icon>
                  </button>
                </td>
              </ng-container>
              <!-- <ng-container *ngIf="col.def === 'CHOP_NO'">
          <mat-header-cell *matHeaderCellDef>
            <router-outlet></router-outlet>
          </mat-header-cell>
        </ng-container> -->
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns()"></tr>
            <!-- <mat-header-row *cdkHeaderRowDef>
        <router-outlet></router-outlet
      ></mat-header-row> -->
            <!-- <mat-header-row *matHeaderRowDef></mat-header-row> -->
            <tr mat-row *matRowDef="let row; columns: displayedColumns()"></tr>
          </table>
        </form>
      </div>
    </div>
    <ng-container *ngIf="zeroRecord$ | async">
      <mat-card>
        <div class="no-record">
          No Records Available. Please consider to add new data.
        </div>
      </mat-card>
    </ng-container>

    <ng-container *ngIf="noResults$ | async">
      <mat-card>
        <div class="no-record">
          No Results Found
        </div>
      </mat-card>
    </ng-container>
    <div class="container">
      <div class="page-select">
        <div class="label">Go to page:</div>
        <mat-form-field style="width: 60px;">
          <mat-select #goToPage (selectionChange)="jumpToPage()">
            <ng-container *ngFor="let numPages of pageSubject | async">
              <mat-option [value]="numPages">
                {{ numPages }}
              </mat-option>
            </ng-container>
          </mat-select>
          <input #goToPage [OnlyNumber]="true" matInput />
        </mat-form-field>

        <mat-paginator
          #paginator
          [showFirstLastButtons]="true"
          [pageSizeOptions]="[5, 10, 20, 100]"
        >
        </mat-paginator>
      </div>
    </div>
  </div>
</div>
<!-- </ng-container> -->

shared.module.ts

import { RecordNotFoundComponent } from './components/record-not-found/pages/record-not-found.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { OnlyNumber } from './directives/onlyNumber.directive';
import { HasPermissionDirective } from './directives/accessRights.directive';

@NgModule({
  declarations: [OnlyNumber, HasPermissionDirective, RecordNotFoundComponent],
  exports: [CommonModule, OnlyNumber, HasPermissionDirective, RecordNotFoundComponent]
})
export class SharedModule {}

Answer 1

如果您要跨应用程序模块使用组件。您必须将该组件放入共享模块中并从该共享模块中导出它。在你的例子中它是SharedModule。并且不要将该组件放入多个模块中。这就是为什么您会收到以下错误:

  Error: Type DataCollectionComponent is part of the declarations of 2 modules: ModuleAModule and ModuleBModule! Please consider moving DataCollectionComponent to a higher module that imports ModuleAModule and ModuleBModule. You can also create a new NgModule that exports and includes DataCollectionComponent then import that NgModule in ModuleAModule and ModuleBModule.

要修复此问题，请将 DataCollectionComponent 添加到 SharedModule 并导出该组件，如下所示。

@NgModule({
  declarations: [OnlyNumber, HasPermissionDirective, RecordNotFoundComponent, DataCollectionComponent],
  exports: [CommonModule, OnlyNumber, HasPermissionDirective, RecordNotFoundComponent, DataCollectionComponent]
})

现在将其从其他模块中删除。

欲了解更多详情，请参阅他们的DOC here