将 Ionic 页面添加到另一个 Ionic 页面 - Ionic 4答案

【问题标题】：Add an Ionic page into another Ionic Page - Ionic 4将 Ionic 页面添加到另一个 Ionic 页面 - Ionic 4
【发布时间】：2018-11-09 15:37:31
【问题描述】：

我有一个页面，我在 Ionic 4 应用程序中用作普通页面，但我还需要在应用程序的其他地方、另一个页面中重用它，以停止重复代码。

我目前的方法是遵循普通指令所采用的方法，并将选择器添加到我希望将页面放入的页面中：

<app-child></app-child>

然后将子页面模块导入添加到父页面模块中：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    ComponentsModule,
    ChildPageModule,
  ],
  declarations: [ParentPage]
})
export class ParentPageModule {}

然后我遇到了错误：

ChildPage is part of the declarations of 2 modules:

这当然是有道理的，因为它是一个主页，现在是一个组件页面。

我尝试将导入移动到应用模块中，尝试将页面添加到父页面模块的声明中，但都未能解决问题。

关于如何在 Ionic 4/Angular 6 中的页面中获取页面的任何想法

【问题讨论】：

尽量将声明只保留在页面模块本身中，并在您想将其用作组件时使用延迟加载进行调用。要调用延迟加载，只需传递带引号的页面名称

标签： angular ionic-framework ionic4

【解决方案1】：

您应该为子页面创建一个组件。

@Component({
  selector: 'app-childpage',
  templateUrl: './childpage.component.html'
})

export class ChildpageComponent {

}

然后创建一个components.module.ts 并执行：

@NgModule({
  declarations: [
    ChildpageComponent
  ],
  imports: [
    ...
  ],
  exports: [
    ChildpageComponent
  ]
})
export class ComponentsModule {}

现在您可以在其他页面中使用<app-childpage></app-childpage> 选择器，方法是将ComponentsModule 导入到它们各自的模块中

【讨论】：