Question

我有一个复杂的模块架构来分离我的Angular2应用程序中的域。好吧，我在巡回英雄教程中遵循路由架构，每个模块都有自己的app-routing.module来声明路由：

app.module.ts（app-routing.module.ts）
- features.mdoule.ts（features-routing.module.ts）。
  - order.module.ts（order-routing.module.ts）。

在我的app-routing.module.ts中：

＆＃13;

const appRoutes: Routes = [
    { path: '',  redirectTo: "dashboard", pathMatch: 'full'}, // always first
    { path: '',  loadChildren: () => AuthModule },
    { path: '', loadChildren: () => FeaturesModule, canActivate: [AuthGuard]},
    { path: '**', component: PageNotFoundComponent } // always last
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

＆＃13;

在我的features-routing.module.ts：

中

＆＃13;

const featuresRoutes: Routes = [
    { path: 'features',  loadChildren: () => OrderModule },
// ... other modules
];

@NgModule({
  imports: [
    RouterModule.forChild(featuresRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class FeaturesRoutingModule {}

＆＃13;

在我的订单-route.module.ts：

＆＃13;

const orderRoutes: Routes = [
     { path: 'order',  component: OrderListComponent, data: { info: { title: 'Orders' } } }
];

@NgModule({
  imports: [
    RouterModule.forChild(orderRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class OrderRoutingModule {}

＆＃13;

如果我导航到localhost：3000 / features / order工作正常，但我可以导航到localhost：3000 / order也可以。

Angular2中的映射路由器是如何工作的？我的路由有问题吗？我只需要功能/订单网址。

非常感谢。

Answer 1

人，

我以另一种方式成功实现，我不得不删除分层模块中我的模块的导入，以便Angular-route不使用RootRoutes加入路由，这样我的组件就是独立的和Lazy Loadeds。如果有人需要类似的东西，请弄清楚我的架构：

app.module.ts

＆＃13;

 import { BrowserModule } from '@angular/platform-browser';
        import { NgModule } from '@angular/core';
        import { FormsModule } from '@angular/forms';
        import { HttpModule } from '@angular/http';

        import { AppRoutingModule } from './app-routing.module';
        import { CoreModule } from './core/core.module';
        import { AuthModule } from './auth/auth.module';
        import { PartialsModule } from './partials/partials.module';

        import { AppComponent } from './app.component';

        const modules = [
          BrowserModule,
          FormsModule,    
          HttpModule,
          CoreModule,
          AuthModule,
          PartialsModule,
        //  FeaturesModule, I remove the import declaration, only app-   routing.module.ts imports my module for Lazy Loading
          AppRoutingModule
        ];

        const components = [
          AppComponent
        ];

        @NgModule({
          declarations: [
            ...components
          ],
          imports: [
            ...modules
          ],
          providers: [],
          bootstrap: [...components]
        })
        export class AppModule { }

＆＃13;

在我的app-routing-module.ts中：

＆＃13;

const routePath = 'features';

const routeData = {
    info: { 
        title: 'Features', 
        withoutNavigate: true 
    }
};

const featuresRoutes: Routes = [
    { path: routePath, loadChildren: () => OrderModule , data: routeData}
];

@NgModule({
  imports: [
    RouterModule.forChild(featuresRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class FeaturesRoutingModule {}

＆＃13;

在我的订单-route.module.ts：

＆＃13;

const orderRoutes: Routes = [
         { path: 'order',  component: OrderListComponent, data: { info: { title: 'Orders' } } }
    ];

    @NgModule({
      imports: [
        RouterModule.forChild(orderRoutes)
      ],
      exports: [
        RouterModule
      ]
    })
    export class OrderRoutingModule {}

＆＃13;

我将在github中使用此架构创建一个存储库，我将使用该链接更新此注释。

谢谢！

Angular 2：路由器树在复杂模块架构中未正确加载

1 个答案: