我已经设置了一个plnkr来展示我想要问的问题
我在网络应用程序中有一些组件,
父组件, App
@Component({
selector: 'my-app',
providers: [],
template: `
<div class="main-container">
<h2>This is the base. This div must be seen on app pages</h2>
<a [routerLink]="['Home']"> Home </a> |
<a [routerLink]="['Users']"> Users </a> |
<a [routerLink]="['Contact']"> Contact </a>
</div>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{
path: '/',
name: 'Home',
component: HomeComponent,
useAsDefault: true
},
{
path: '/users/...',
name: 'Users',
component: UsersComponent
},
{
path: '/contact',
name: 'Contact',
component: ContactComponent
}
])
export class App {
}
UsersComponent
被加载到路径 /users
的父控制器的 router-outlet
,如下所示,
@Component({
selector: 'my-app',
template : `
<div *ngFor="#page of pages">
<a [routerLink]="[page.name]">
{{page.slug}}
</a>
</div>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{path : '/', name: 'Main', component: MainRoute, useAsDefault: true}
])
export class UsersComponent{
/**
* some methods to configure the routes,
*/
}
UsersComponent
已为用户动态配置路由,
例如 . /alex
, /john
等,
由于路由来自子组件,路径看起来像 example.com/users/alex
, example.com/users/john
等 . 但我希望路径为 example.com/alex
和 example.com/john
我还想将与每个用户关联的组件加载到父级的 router-outlet
. 在这里的示例中, App
的_28303332_使我可以摆脱用户列表 .
感谢您的任何帮助 .
1 回答
以下是我的配置:Plunker
1. Define your App's RouteConfig like this
2. Remove router.config and <router-outlet> from your UsersComponent
不要通过
RouteData
发送用户数据,因为您必须提前为每个用户定义路由,这不是必需/有效的 .3. Structure your service to send data for a specific user
4. Update your PersonComponent to accomodate with these changes.