具有多个页面的 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，ionic generate page 命令将为您完成这项工作，并在您创建新页面时创建一个包含 4 个文件的文件夹。

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

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

错误：/.../src/pages/pagegroup/pageX.ts 有一个@IonicPage 装饰器，但在/.../src/pages/pagegroup/pageX.module 处没有对应的“NgModule” .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 文件将具有相似的结构：

custom-settings.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 {}

custom-settings.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: - 在这种情况下，您应该在同一目录中创建相应的custom-settings.html 模板文件。

如果你想为这个页面添加 CSS 规则，你可以创建一个可选的custom-settings.scss 文件，比如：

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

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

Answer 2

我相信你想要的是“模态”

https://ionicframework.com/docs/components/#modals

您可以在设置下添加单个页面。

Answer 3

这个问题我迟到了，但以防万一将来有人需要它！

我不确定您是否指的是这个，但您可以将多个页面放入一个具有文件夹树的模块中，例如：

• 页
  • 设置
    • 孩子第1页
      • child1.page.(html|scss|ts)
    • 孩子第1页
      • child1.page.(html|scss|ts)
    • settings.module.ts
    • settings.page.(html|scss|ts)

然后在你喜欢的设置路由模块中

import ...

const routes: Routes = [{
  path: '',
  redirectTo: 'pathtoRedirect', // if you need it
  pathMatch: 'full'
}, {
  path: '',
  component: SettingsPage
}, {
  path: 'child-page-1',
  component: ChildPage1
}, {
  path: 'child-page-2',
  component: ChildPage2
}]


@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SettingsPageModule {}

然后在您的应用路由模块中，您可以执行以下操作：

import ...

const routes: Routes = [{
...
}, {
  path: 'settings',
  loadChildren: () => import('./pages/settings/settings.module').then(m => m.SettingsPageModule),
}, {
  ...
}]


@NgModule({
 ...
})
export class AppRoutingModule{}

这应该可行。一个组件需要的是它在任何模块中。确实将“每页模块策略”作为最佳实践包含在内，但是，有时我只是不希望有很多文件实际上可以在同一个模块下删除和管理。

从这一点开始，如果你喜欢的话，你可以拥有一个不同的文件夹树，甚至可以创建一个更深的嵌套路由

• /设置
• /settings/children/:id
• /settings/children/otherchildren/childrenpage

现在取决于您和您的项目需求！

希望这对某人有用！