Angular 2功能模块的路由示例 [英] Angular 2 feature module routing example

问题描述

就Angular 2路由而言，我几乎能够找到整个应用程序只有一个路由文件的场景示例。

I希望看到一个示例，该示例不仅使用一个路由文件，还使用一个主路由文件，然后至少使用一个功能模块路由文件。

编辑：我意识到已经提出了一个类似的问题，回答。为什么我没有一个特别有用的原因有两个：

1）这个问题非常针对该用户的情况，因此存在很多噪音 。我只想问一个功能模块路由的单独示例。

2）这个问题的答案似乎并没有解决如何创建路由文件的问题。功能模块，然后将其重新绑定到应用程序的主路由中。也许它在那里，我只是想念它，但我在那里看不到。

解决方案

让我们看看这个例子是否涵盖了

这些是正在使用的模块：

• AppModule（根模块）


• UsersModule（功能模块）

以下代码段已简化。 / p>

app.module.ts

 从'./users.module'导入{UsersModule}; 
从 ./app.routing导入{AppRouting}； 
 
 @NgModule（{
进口：[
 BrowserModule，
 UsersModule，
 AppRouting，
]，
声明：[ ...]，
提供程序：[...]，
引导程序：[AppComponent] 
}）
出口类AppModule {} 
  

app.routing.ts

  const appRoutes：路由= [
 {路径：，redirectTo：'home'，pathMatch：'full'}，
 {路径：'home'，组件：Home} ，
 {路径： **，组件：未找到}，//总是最后
]; 
 
 export const AppRouting = RouterModule.forRoot（appRoutes，{
 useHash：true 
}）; 
  

users.module.ts

 从'@ angular / core'导入{NgModule}； 
从 ./users.routing导入{UsersRouting}； 
 
 @NgModule（{
 import：[
 CommonModule，// ngFor，ngIf指令
 UsersRouting，
]，
声明：[ ...]，
提供程序：[...] 
}）
出口类UsersModule {} 
  

users.routing

  const用户路线：路线= [ 
 {路径：用户，
子代：[
 {路径：，组件：用户}，
 {路径：：id，组件：用户} 
] 
} 
]; 
 
 export const UsersRouting = RouterModule.forChild（usersRoutes）; 
  

插棒式：
http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview

示例代码还包括AboutModule（延迟加载的模块，包括解析示例），但不包括共享模块示例。

您可以在以下幻灯片中找到更多详细信息：
https://slides.com/gerardsans/ngpoland-amazing-ng2-router

As far as Angular 2 routing goes, I've mostly been able to find examples of the scenario where there's exactly one routing file for the whole application.

I'd like to see an example of using not just one routing file, but a main routing file and then at least one feature module routing file.

Edit: I realize that a somewhat similar question has already been asked and answered. There are two reasons why I don't find that one particularly helpful:

1) The question is very specific to that user's situation and therefore there's a lot of "noise". All I'm asking for is one single isolated example of feature module routing.

2) The answers for that question don't seem to address how to create a routing file for a feature module and then tie it back into the app's main routing. Maybe it's there and I'm just missing it but I don't see it there.

解决方案

Let's see if this example covers what you are looking for.

These are the modules being used:

• AppModule (root module)
• UsersModule (feature module)

Snippets below are simplified.

app.module.ts

import { UsersModule } from './users.module';
import { AppRouting } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    UsersModule,
    AppRouting,
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.routing.ts

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: Home },
  { path: '**', component: NotFound }, //always last
];

export const AppRouting = RouterModule.forRoot(appRoutes, { 
  useHash: true
});

users.module.ts

import { NgModule } from '@angular/core';
import { UsersRouting } from './users.routing';

@NgModule({
  imports: [
    CommonModule, // ngFor, ngIf directives
    UsersRouting,
  ],
  declarations: [...],
  providers: [...]
})
export class UsersModule { }

users.routing

const usersRoutes: Routes = [
  { path: 'users',
    children: [
      { path: '', component: Users },
      { path: ':id', component: User }
    ]
  }
];

export const UsersRouting = RouterModule.forChild(usersRoutes);

Plunker: http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview

Sample code includes also AboutModule (lazy loaded module, includes resolve example) but doesn't include a Shared Module example.

You can find more details at these slides: https://slides.com/gerardsans/ngpoland-amazing-ng2-router

这篇关于Angular 2功能模块的路由示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！