Fatal编程技术网
  • javascript/
  • Javascript 离子3多页功能模块

Javascript 离子3多页功能模块

javascript angular

Javascript 离子3多页功能模块,javascript,angular,ionic3,Javascript,Angular,Ionic3,我用的是离子3和角5。我有一个功能模块“设置”： import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { SettingsPage } from './test'; @NgModule({ declarations: [ SettingsPage, ], imports: [ IonicPageModule.forChild

我用的是离子3和角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页。
我查阅了很多帖子，却不知道该怎么做。有可能吗

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

如果使用CLI，
ionic generate page
命令将为您执行此任务，并在创建新页面时创建包含4个文件的文件夹

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

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

错误：/…/src/pages/pagegroup/pageX.ts有一个@IonicPage装饰器，但在/../src/pages/pagegroup/pageX.module.ts处没有相应的“NgModule”

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

让我们假设您从以下内容开始：

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
模块和page.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 {}

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
};
自定义设置。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 {}

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
};
或者，您可以将这些CSS规则添加到现有的
设置.scss文件中：这完全取决于您。
如果您使用延迟加载，Ionic3的标准方式是：每页一个模块

如果使用CLI，
ionic generate page
命令将为您执行此任务，并在创建新页面时创建包含4个文件的文件夹

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

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

错误：/…/src/pages/pagegroup/pageX.ts有一个@IonicPage装饰器，但在/../src/pages/pagegroup/pageX.module.ts处没有相应的“NgModule”

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

让我们假设您从以下内容开始：


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


模块和page.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 {}



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
};


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



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
};



或者，您可以将这些CSS规则添加到现有的
设置.scss文件中：这完全取决于您。
我相信您需要的是“modals”




您可以在您的设置下添加单独的页面。
我相信您需要的是“modals”




你可以在你的设置下添加单独的页面。
这个问题我来晚了，但只是为了以防万一将来有人需要它

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


    

  • 页数

      

    • 背景

        

      • 第1页

          

        • child1.page.（html | scss | ts）
          • 

        

        • 

      • 第1页

          

        • child1.page.（html | scss | ts）
          • 

        

        • 

      • settings.module.ts
        • 

      • 设置。页面。（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{}


这应该行得通。一个组件需要的是它能在任何模块中。诚然，“每页模块策略”是作为最佳实践包括在内的，但是，有时我只是不想在同一个模块下有许多实际上可以删除和管理的文件

从这一点上讲，如果您愿意，您可以有一个不同的文件夹树，甚至可以创建一个更深的嵌套路由，如


    

  • /背景
    • 

  • /设置/子项/：id
    • 

  • /设置/儿童/其他儿童/儿童页面
    • 


现在，这将取决于您和您的项目需要


希望这对某人有用
 这个问题我来晚了，只是以防万一将来有人需要它

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


    

  • 页数

      

    • 背景

        

      • 第1页

          

        • child1.page.（html | scss | ts）
          • 

        

        • 

      • 第1页

          

        • child1.page.（html | scss | ts）
          • 

        

        • 

      • settings.module.ts
        • 

      • 设置。页面。（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{}


这应该行得通。一个组件需要的是它能在任何模块中。诚然，“每页模块策略”是作为最佳实践包括在内的，但是，有时我只是不想在同一个模块下有许多实际上可以删除和管理的文件

从这一点上讲，如果您愿意，您可以有一个不同的文件夹树，甚至可以创建一个更深的嵌套路由，如


    

  • /背景
    • 

  • /设置/子项/：id
    • 

  • /设置/儿童/其他儿童/儿童页面
    • 


现在，这将取决于您和您的项目需要

希望这对某人有用
 你怎么办