Angular 5 触发器导航在父路由器插座上从子插座

Question

我在结构中有一系列角度组件，如下所示。

• RootComponent--

我的问题是来自路由器孙组件中按钮的链接，如何导航到根组件？

应用程序路由

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 ],
      },
    ]
  }
];

子组件路线

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 ]
      }
    ]
  }

];

Answer 1

您需要做的是首先使用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 ;
            });
}
}

然后路由中的路由订阅会给你路由中的任何路由参数（例如console.log（route.customerid）检查）。

navigate(){
this.router.navigate(['customers' + this.customerId]);
}

并在您的html代码中使用：

<a (click)="navigate()"></a>

Answer 2

您可以从激活的路由中获取 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'];
  }
}

Answer 3

您可以使用常规路由器简单地从孙子导航到根，如下所示：

<!-- grandchild.component.html --!>
<a [routerLink]="['/']">back to root</a>