Question

按照ionic2初学者的指南，我有一个“[我的项目] \ src \ app \ app.module.ts”看起来像这样：

    //Standard modules
    import { NgModule } from '@angular/core';
    import { IonicApp, IonicModule } from 'ionic-angular';
    import {Http} from '@angular/http';
     .... //possibly some more Standard modules


    ////Special Modules
    //module translate
    import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate';
    export function createTranslateLoader(http: Http) {
        return new TranslateStaticLoader(http, './assets/i18n', '.json');
    }


    //my pages list 
    import { MyApp } from './app.component';
    import { MyPage1 } from '../pages/page-1/page-1';
    import { MyPage2 } from '../pages/page-2/page-2';
...
    import { MyPageN } from '../pages/page-n/page-n';

    //some custom component (graph elements I use in the pages)
    import { MyCustomGraph1Diagram } from '../custom-components/my-custom-graph-1/my-custom-graph-1';
    import { MyCustomGraph2Diagram } from '../custom-components/my-custom-graph-2/my-custom-graph-2';
...
    import { MyCustomGraphNDiagram } from '../custom-components/my-custom-graph-n/my-custom-graph-n';


    //my custom services
    import { MyService1 } from '../services/service-1/service-1';
...
    import { MyServiceN } from '../services/service-n/service-n';


    //my custom pipes
    import { MyPipe1 } from '../custom-pipes/pipe-1/pipe-1';
...
    import { MyPipeN } from '../custom-pipes/pipe-n/pipe-n';

    @NgModule({
      declarations: [
        MyApp,
        MyPage1,
        ...
        MyPageN,
        MyCustomGraph1Diagram,
        ...
        MyCustomGraph2Diagram,
        MyPipe1,
        ....
        MyPipe1 
      ],
      imports: [
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [Http]})
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        MyPage1,
        ...
        MyPageN,
      ],
      providers: [
        MyService1,
        ...
        MyService2
      ]
    })
    export class AppModule {}

我看起来会变得混乱。

所以我想知道是否可以使用“[my project] \ src \ app \ app.module.ts”调用一些子模块

这样的事情：在“[我的项目] \ src \ pages \ pages.module.ts”下：

    //my pages list 
    import { MyApp } from './app.component';
    import { MyPage1 } from '../pages/page-1/page-1';
    import { MyPage2 } from '../pages/page-2/page-2';
...
    import { MyPageN } from '../pages/page-n/page-n';


    @NgModule({
      declarations: [
        MyPage1,
        ...
        MyPageN,
      ],
      imports: [
              ???
      ],
      bootstrap: [???],
      entryComponents: [
        MyPage1,
        ...
        MyPageN,
      ],
    })
    export class PagesModule {}

等等其他类别。

所以我可以在几个* .module.ts文件中打破它，它将全部从[我的项目] \ src \ app \ app.module.ts启动。

Answer 1

它与Angular2中的相似。不同之处在于，对于所有模块，您应添加IonicModule。并将模块导出为TodoModule，但不是import { NgModule } from '@angular/core'; import { IonicModule } from 'ionic-angular'; import { MyApp } from '../../app/app.component'; import { TodoListComponent } from './list/list.component'; import { TodoDetailComponent } from './detail/detail.component'; import { TodoService } from './todo.service'; @NgModule({ imports: [CommonModule, FormsModule, IonicModule.forRoot(MyApp)], declarations: [TodoListComponent, TodoDetailComponent], entryComponents:[TodoListComponent, TodoDetailComponent], providers: [TodoService], exports: [IonicModule] }) export class TodoModule {}。像这个模块：

IonicModule.forRoot(MyApp)

我不知道在每个模块中我需要在导入中添加"15 - 24"。

然后，在您的主模块中，只需将此模块作为普通模块导入即可。

Answer 2

<强> IonicPageModule

@NgModule({
  declarations: [
    MyPage
  ],
  imports: [
    IonicPageModule.forChild(MyPage)
  ],
  entryComponents: [
    MyPage
  ]
})
export class MyPageModule {}

只需在主（ app.module.ts ）模块中导入此新模块

...
IonicModule.forRoot(MyApp),
MyPageModule 
...

参考：Ionic Page Module

Ionic2如何在几个模块中组织代码以收集“app.module.ts”

2 个答案: