如何在Ionic 3+Angular 5的Settings特性模块中新增多页面？

我正在使用Ionic 3和Angular 5，现有一个名为Settings的特性模块，代码如下：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingsPage } from './test';
@NgModule({
 declarations: [
  SettingsPage,
 ],
 imports: [
  IonicPageModule.forChild(SettingsPage),
 ],
})
export class SettingsPageModule {}

我希望在此Settings模块下再添加5个页面，查阅了大量帖子仍未找到实现方法，请问这是否可行？

当然可行！在Ionic 3 + Angular 5的特性模块里添加多个页面完全没问题，下面是具体的实现步骤，你可以照着操作：

步骤1：生成新页面 #

首先用Ionic CLI创建你需要的5个页面，假设页面分别是ProfileSettingsPage、NotificationSettingsPage、PrivacySettingsPage、DisplaySettingsPage、AccountSettingsPage，运行以下命令：

ionic generate page settings/profile-settings
ionic generate page settings/notification-settings
ionic generate page settings/privacy-settings
ionic generate page settings/display-settings
ionic generate page settings/account-settings

这些命令会自动把新页面放在settings目录下，和你现有的SettingsPage同级。

步骤2：更新SettingsPageModule #

修改你现有的SettingsPageModule，把新页面的组件加入declarations数组，同时还要添加到entryComponents（Ionic 3中页面必须作为入口组件才能被导航）：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
// 导入所有页面组件
import { SettingsPage } from './settings'; // 注意：这里把原路径./test改成正确的./settings
import { ProfileSettingsPage } from './profile-settings/profile-settings';
import { NotificationSettingsPage } from './notification-settings/notification-settings';
import { PrivacySettingsPage } from './privacy-settings/privacy-settings';
import { DisplaySettingsPage } from './display-settings/display-settings';
import { AccountSettingsPage } from './account-settings/account-settings';

@NgModule({
  declarations: [
    SettingsPage,
    ProfileSettingsPage,
    NotificationSettingsPage,
    PrivacySettingsPage,
    DisplaySettingsPage,
    AccountSettingsPage
  ],
  imports: [
    IonicPageModule.forChild(SettingsPage),
  ],
  entryComponents: [
    ProfileSettingsPage,
    NotificationSettingsPage,
    PrivacySettingsPage,
    DisplaySettingsPage,
    AccountSettingsPage
  ]
})
export class SettingsPageModule {}

注意：一定要修正SettingsPage的导入路径，确保和实际文件位置匹配，避免路径错误。

步骤3：实现页面导航 #

现在你可以在SettingsPage或者其他组件中通过Ionic的导航服务跳转到新页面，比如在SettingsPage的逻辑代码中：

import { NavController } from 'ionic-angular';
import { ProfileSettingsPage } from './profile-settings/profile-settings';

export class SettingsPage {
  constructor(public navCtrl: NavController) {}

  navigateToProfileSettings() {
    this.navCtrl.push(ProfileSettingsPage);
  }
}

重要提示 #

• 所有新页面必须在SettingsPageModule的declarations和entryComponents中注册，这是Ionic 3识别页面的必要条件。
• 如果这些页面需要被Settings模块以外的组件使用，可以把它们添加到exports数组中；如果只是模块内部使用，就不需要这一步。
• 检查每个页面的导入路径，确保和文件实际位置一致，避免编译报错。

这样就能在同一个Settings特性模块下管理多个页面了，完全满足你的需求！

内容的提问来源于stack exchange，提问作者Milos