从 child 组件路由到 parent 的 router-outlet
Routing to parent's router-outlet from a child component
我设置了一个 plnkr 来演示我想问的问题
我在网络应用程序中有一些组件,
parent 组件,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
被加载到 parent 控制器的 router-outlet
路径 /users
如下所示,
@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
等等,
由于路由来自 child 组件,因此路径看起来像 example.com/users/alex
、example.com/users/john
等。但我希望路径为 example.com/alex
和 example.com/john
我还想将与每个用户关联的组件加载到 parent 的 router-outlet
。在此处的示例中,到 App
的 router-outlet
以便我可以摆脱用户列表。
感谢您的帮助。
这是我对您的配置的看法:Plunker
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。从 UsersComponent
中删除 router.config
和 <router-outlet>
不要通过 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。构建您的服务以发送特定用户的数据
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;
}
}
我设置了一个 plnkr 来演示我想问的问题
我在网络应用程序中有一些组件,
parent 组件,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
被加载到 parent 控制器的 router-outlet
路径 /users
如下所示,
@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
等等,
由于路由来自 child 组件,因此路径看起来像 example.com/users/alex
、example.com/users/john
等。但我希望路径为 example.com/alex
和 example.com/john
我还想将与每个用户关联的组件加载到 parent 的 router-outlet
。在此处的示例中,到 App
的 router-outlet
以便我可以摆脱用户列表。
感谢您的帮助。
这是我对您的配置的看法:Plunker
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。从 UsersComponent
router.config
和 <router-outlet>
不要通过 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。构建您的服务以发送特定用户的数据
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;
}
}