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中声明和导出的组件。

我希望我能正确理解您的问题，希望对您有所帮助。

“ X是2个模块的声明的一部分”创建共享模块

1 个答案: