Question

我正在使用Ionic 3和angular 5.我有一个功能模块＆＃39;设置＆＃39;：

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个文件的文件夹。

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

但是，如果你想在一个模块中多个页面，那么 无法正常工作 ，至少在我的经验中 - 例如如果您尝试将两个页面放在同一目录中并从同一模块加载它们，您将收到以下错误消息：

错误：/.../scrc / 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文件将具有类似的结构：

自定义-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 {}

自定义-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 };

您可以使用template:代替templateURL: 'custom-settings.html' - 在这种情况下，您应该在同一目录中创建相应的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

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

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

页
- 设置
  - childPage 1
    - child1.page。（html | scss | ts）
  - childPage 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{}

这应该有效。组件需要将其包含在ANY模块中。最佳做法是包括“每页模块策略”，但是，有时候我根本不想拥有实际上可以在同一模块下删除和管理的许多文件。

从这一点来看，如果您愿意的话，可以使用其他文件夹树，甚至可以创建更深层的嵌套路由，例如

/设置
/ settings / children /：id
/ settings / children / otherchildren / childrenpage

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

希望这对某人有用！

具有多个页面的Ionic 3功能模块

3 个答案: