我得到了以下组件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。
答案 0 :(得分: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中声明和导出的组件。
我希望我能正确理解您的问题,希望对您有所帮助。