javascript - Ionic 3 多页面功能模块

Question

我正在使用 Ionic 3 和 Angular 5。我有一个功能模块“设置”:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SettingsPage } from './test';

@NgModule({
  declarations: [
    SettingsPage,
  ],
  imports: [
    IonicPageModule.forChild(SettingsPage),
  ],
})
export class SettingsPageModule {}

在“设置”模块下，我想再添加 5 个页面。 我查了很多帖子，但不知道如何做到这一点。有可能吗？

Answer 1

如果使用延迟加载，Ionic3 标准方式是:每页一个模块。

如果您使用 CLI，ionicgeneratepage 命令将为您完成这项工作，并在您创建新页面时创建一个包含 4 个文件的文件夹。

如果您不希望每个页面都位于单独的目录中，一种方法可能是在同一目录中创建新的页面相关文件。

但是，如果您希望在一个模块中多个页面，那么它行不通，至少根据我的经验 - 例如如果您尝试将两个页面放在同一目录中并从同一模块加载它们，您将收到以下错误消息:

Error: /.../src/pages/pagegroup/pageX.ts has a @IonicPage decorator, but it does not have a corresponding "NgModule" at /.../src/pages/pagegroup/pageX.module.ts

下面我将解释一个可行的解决方案，即在单个目录中拥有多个页面，每个页面都有自己的模块。

假设您从这里开始:

src
  settings
    settings.html
    settings.module.ts
    settings.scss
    settings.ts

...并且您想要添加一个名为“CustomSettingsPage”的页面。

根据此页面的复杂程度，您必须在同一目录 (src/settings) 中添加以下 2 到 4 个文件 - 可选文件位于方括号之间:

[custom-settings.html]
custom-settings.module.ts
[custom-settings.scss]
custom-settings.ts

模块和页面 .ts 文件将具有类似的结构:

自定义设置.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

import { CustomSettingsPage } from './custom-settings';

@NgModule({
  declarations: [
    CustomSettingsPage,
  ],
  imports: [
    IonicPageModule.forChild(CustomSettingsPage),
  ],
  exports: [
    CustomSettingsPage
  ]
})
export class CustomSettingsPageModule {}

自定义设置.ts

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

@IonicPage()
@Component({
  selector: 'page-custom-settings',
  template: `<your html template here>`
})
export class CustomSettingsPage {
   // your page code here
};

您可以使用 templateURL: 'custom-settings.html' 而不是 template: - 在这种情况下，您应该创建相应的自定义设置。 html 模板文件位于同一目录中。

如果您想为此页面添加 CSS 规则，您可以创建一个可选的 custom-settings.scss 文件，例如:

.page-custom-settings {
   /* your rules here */
}

或者，您可以将这些 CSS 规则添加到现有的 settings.scss 文件中:这完全取决于您。