[英]Routing to parent's router-outlet from a child component
I've setup a plnkr to demonstrate what I am trying to ask 我已经设置了一个plnkr来演示我想要问的问题
I have some components in a web app, 我在网络应用程序中有一些组件,
the parent component, App
父组件,
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
is loaded to the router-outlet
of the parent controller at the route /users
which is shown below, 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
has dynamically configured routes for users, UsersComponent
已为用户动态配置路由,
eg. 例如。
/alex
, /john
etc, /alex
, /john
等,
since the routes are from the child component, the path looks like example.com/users/alex
, example.com/users/john
etc.. But I want the path to be example.com/alex
and example.com/john
由于路线是从子组件,该路径看起来像
example.com/users/alex
, example.com/users/john
等。但我想要的路径是example.com/alex
和example.com/john
also I want to load the component associated with each user to the parent's router-outlet
. 我还想将与每个用户关联的组件加载到父
router-outlet
。 In the example here, to the router-outlet
of App
so that I can get rid of the user list. 在这里的示例中,到
App
的router-outlet
,以便我可以摆脱用户列表。
Thank You for any help. 感谢您的任何帮助。
Here is my take on your configuration: Plunker 以下是我对您配置的看法 : Plunker
1. Define your App
's RouteConfig
like this 1.像这样定义你的
App
的RouteConfig
@RouteConfig([
{
path: '/',
name: 'Home',
component: HomeComponent,
useAsDefault: true
},
{
path: '/:user',
name: 'User',
component: PersonComponent
},
{
path: '/users',
name: 'Users',
component: UsersComponent
},
{
path: '/contact',
name: 'Contact',
component: ContactComponent
}
])
2. Remove router.config
and <router-outlet>
from your UsersComponent
2.删除
router.config
和<router-outlet>
从UsersComponent
Don't send the user data via RouteData
because than you'll have to define routes for every user in advance, which is not necessary/ efficient. 不要通过
RouteData
发送用户数据,因为您必须提前为每个用户定义路由,这不是必需/有效的。
@Component({
selector: 'my-app',
template : `
<div *ngFor="#page of pages">
<a [routerLink]="['User', {user: page.name}]">
{{page.slug}}
</a>
</div>
`,
providers : [PagesService]
})
export class UsersComponent{
pages = [];
constructor(private pgSvc: PagesService, router: Router) {
}
}
3. Structure your service to send data for a specific user 3.构建服务以为特定用户发送数据
4. Update your PersonComponent
to accomodate with these changes. 4.更新
PersonComponent
以适应这些更改。
@Component({
selector : 'person',
template : `
<div class="person-container">
<h3>Person selected : <strong> {{data.get['user']}} </strong></h3>
</div>
`
})
class PersonComponent {
constructor(public data: RouteParams) {
// call your service here to get the user specific data by using
let userName = data.get('user');
// yourService.getUserData(userName);
}
routerCanReuse(next, prev) {
return false;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.