[英]Angular 5 trigger navigation on parent router-outlet from child outlet
I have a series of Angular components in the structure as follows. 我在结构中具有一系列Angular组件,如下所示。
My question is from a routerLink on a button in the grandchild component how do I navigate to the rootcomponent? 我的问题是来自孙子组件按钮上的routerLink,我如何导航到根组件?
app-routes 应用程序路由
const routes: Routes = [
{
path: '',
redirectTo: environment.devRedirect,
pathMatch: 'full',
canActivate: [AuthenticationGuard]
},
{
path: 'customers/:customerId/contracts/:contractId',
canActivate: [AuthenticationGuard],
children: [
{
path: 'projects/:projectId/grouping',
loadChildren: './grouping/grouping-routing.module#GroupingRoutingModule',
data: { animation: 'grouping' },
canActivate: [ AuthenticationGuard ]
},
{
path: '',
loadChildren: './projects/projects-routing.module#ProjectOverviewRoutingModule',
data: {
animation: 'project-overview'
},
canActivate: [ AuthenticationGuard ],
},
]
}
];
child component routes 子组件路线
const routes: Routes = [
{
path: '',
component: GroupingComponent,
canActivate: [ AuthenticationGuard ],
children: [
{
path: 'create',
component: CreateEditComponent,
data: { animation: 'create' },
canActivate: [ AuthenticationGuard ]
},
{
path: ':groupId/edit',
component: CreateEditComponent,
data: { animation: 'edit' },
canActivate: [ AuthenticationGuard ]
},
{
path: '',
component: OverviewComponent,
data: { animation: 'overview' },
canActivate: [ AuthenticationGuard ]
}
]
}
];
You can simply navigate to the root from the grandchild using regular routerLink like this: 您可以使用常规的routerLink轻松地从孙子导航到根,如下所示:
<!-- grandchild.component.html --!>
<a [routerLink]="['/']">back to root</a>
You could get the customerId and contractId params from the activated route, which you could inject to the component as following: 您可以从激活的路线中获取customerId和contractId参数,可以将其注入到组件中,如下所示:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
selector: 'my-component',
template: `
<a [routerLink]="['/customers', customerId, 'contracts', contractId]">back to root</a>
`
})
export class MyComponent implements OnInit {
costumerId: string;
contractId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
const params = this.route.snapshot.params;
this.costumerId = params['costumerId'];
this.contractId = params['contractId'];
}
}
What you need to do is to use ActivatedRoute first : 您需要做的是首先使用ActivatedRoute :
constructor(private route : ActivatedRoute,
private router: Router){}
routeSubscription : Subscription ;
customerId : number ;
ngOnInit(){
this.getRouteParams();
}
getRouteParams(){
this.routeSubscription = this.route.params
.subscribe(
(route)=>{
console.log(route);
this.customerId = route.customerId ;
});
}
}
then route in routeSubscription will give you whatever route param you have in your route(for example console.log(route.customerId) to check ). 然后routeSubscription中的route将为您提供您在路由中具有的任何路由参数(例如console.log(route.customerId)进行检查)。 then you can navigate using an instance of Router like :
那么您可以使用Router的实例进行导航,例如:
navigate(){
this.router.navigate(['customers' + this.customerId]);
}
and in your html code use : 并在您的html代码中使用:
<a (click)="navigate()"></a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.