“ X是2個模塊的聲明的一部分”創建共享模塊

Question

我得到了以下組件modal.bed.ts，該組件是在應用程序的2個不同選項卡中導入的。 但是，這是不允許的。 所以我發現我需要創建一個共享模塊，但是現在我陷入了困境。

這是modal.bed.ts

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';

@Component({
    template: `<ion-header>Bed</ion-header>`,
    selector: 'page-modal'
})

export class ModalPageBedComponent {

    constructor(private ctrl: ModalController) { }

    async close() {
        this.ctrl.dismiss();
    }
}

然后，按如下所示導入tab2.module.ts中

import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';    
import { RouterModule } from '@angular/router';
import { Tab3Page } from './tab2.page';

import { ModalPageBedComponent } from '../modal/modal.bed';
    @NgModule({
      imports: [
        IonicModule,
        CommonModule,
        FormsModule,
          RouterModule.forChild([{ path: '', component: Tab3Page }]),
          RouterModule.forChild([{ path: '', component: ModalPageBedComponent}]),
      ],
      declarations: [
          Tab2Page,
          ModalPageBedComponent,
      ]
    })
    export class Tab2PageModule {}

tab3.module.ts的導入是相同的，但是它是Tab3而不是Tab2。

然后在我的tab2.page.ts中也通過導入

import {ModalPageBedComponent} from '../modal/modal.bed';

然后可以通過以下方式在頁面內使用它：

異步presentModal（obj）{

let cmp = null;
alert(obj)

// Selects the object's class
switch (obj) {
    case 'Bed'.toString(): {
        cmp = ModalPageBedComponent;
        break;
    }
.....

我在tab3.page.ts中以相同的方式使用它。 所以現在我需要創建一個共享模塊，該模塊可以導入和導出組件，因為不能兩次聲明一個組件。

所以我創建了以下modal.module.ts

import { NgModule } from '@angular/core';

import { ModalPageBedComponent } from '../modal/modal.bed';
import { ModalPageTvComponent } from '../modal/modal.tv';
import { ModalPageLampComponent } from '../modal/modal.lamp';
import { ModalPageFridgeComponent } from '../modal/modal.fridge';
import { ModalPageFanComponent } from '../modal/modal.fan';
import { ModalPageWindowComponent } from '../modal/modal.window';

@NgModule({
    imports: [
    ],
    declarations: [
        ModalPageBedComponent,
        ModalPageFanComponent,
        ModalPageFridgeComponent,
        ModalPageLampComponent,
        ModalPageTvComponent,
        ModalPageWindowComponent
    ],
    exports: [
        ModalPageBedComponent,
        ModalPageFanComponent,
        ModalPageFridgeComponent,
        ModalPageLampComponent,
        ModalPageTvComponent,
        ModalPageWindowComponent
    ]
})

export class SharedModalModule {}

現在，我嘗試在tab2.page.ts中導入SharedModalModule。

import {SharedModalModule} from '../modal/modal.module';

但是，我不知道如何訪問ModalPageBedComponent。 我不確定自己是否做對了，我搜索並閱讀了多篇有關它的文章。 但我不太了解現在應該如何通過僅導入SharedModalModule來訪問tab2.page.ts中的ModalPageBedComponent。

Answer 1

我了解的是，您已經創建了sharedModule來導入和導出要重復的組件，對嗎？ 因此在要調用其他組件時聲明“父親”組件時，需要在模塊中導入SharedModule。 我將嘗試解釋：

您在某個地方有此模塊（我將假設它是主模塊）

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ModulesModule } from './modules/modules.module';
import { SharedModalModule } from './shared/shared.modal.module';

@NgModule({
  declarations: [
    AppComponent,
    //.. and whatever components you have here
  ],
  imports: [
    BrowserModule,
    SharedModalModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在這里，您導入了ShareModule，因此此處聲明的組件將能夠使用在您創建的SharedModule中聲明和導出的組件。

希望我能正確理解您的問題，希望對您有所幫助。