Question

我正在将Angular 2应用程序从2.0.0-beta.0升级到2.4

我有复杂的路由，许多重用的组件有多个子组件;我将举一个简化的例子：

└─Home
  ├─Company
  | ├─Requests
  | └─Users
  |   ├─Subscriptions
  |   | └─Requests
  |   └─Requests
  ├─Users
  | ├─Subscriptions
  | | └─Requests
  | └─Requests
  └─Subscriptions
    └─Requests

如您所见，Users组件和Subscriptions组件（具有相应的子组件）被多次使用，Request模块也是Users和Company的子组件。

这在Beta 0中很简单，因为组件可以有自己独立的路由。但是，在当前版本的Angular中，我无法找到一个好方法。我可以将带有子节点的每个重用组件转换为带有引导组件的模块，但这会增加更多代码并且不会非常灵活。

有没有办法在不重复使用具有子模块的每个重用组件的情况下执行此操作？

Answer 1

如何简单地使用孩子＆＃39; +＆＃39; redirectTo＆＃39;？

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'company', children: [
    { path: '', pathMatch: 'full', component: CompanyComponent},
    // path '/company/requests' will redirectTo '/requests'
    { path: 'requests': redirectTo: '/requests' }, 
    { path: 'users': redirectTo: '/users' },
  ]},
  { path: 'users', children: [
    { path: '', pathMatch: 'full', component: UsersComponent },
    { path: 'subscriptions', redirectTo: '/subscriptions' },
    { path: 'requests', redirectTo: '/requests' }
  ]},
  { path: 'subscriptions', children: [
    { path: '', pathMatch: 'full', component: SubscriptionsComponent },
    { path: 'requests', redirectTo: '/requests' },
  ]},
  { path: 'requests', component: RequestsComponent },
];

Answer 2

我通过将此代码放在我的每个组件中来解决这个问题：

在foo.component.ts中：

import { BarComponent } from './bar.component'
export const FooRouting: Routes = [
    { path: 'Bar', component: BarComponent }
]

和home.ts（模块）

import { FooComponent, FooRouting } from './foo.component'
import { BarComponent } from './bar.component'

@NgModule({
    imports: [
        ...
        RouterModule.forRoot([
            { path: '', component: FooComponent, children: FooRouting }
            { path: 'Bar', component: BarComponent }
        ])
        ...
    ],
    ...
)}

制作：

└─Home
  ├─Foo
  | └─Bar
  └─Bar

Angular 2复杂的嵌套路由

2 个答案: