Question

我在结构中有一系列Angular组件如下。

RootComponent - ＆gt;包含路由器插座
- 子组件 - ＆gt; 包含路由器插座
  - 大孩子组件 - ＆gt;包含用于触发导航回根组件的按钮

我的问题来自孙子组件中按钮上的routerLink，如何导航到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

您可以使用常规routerLink导航到孙子的根目录，如下所示：

<!-- grandchild.component.html --!>
<a [routerLink]="['/']">back to root</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

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

然后routeSubscription中的路由将为您提供路由中的任何路由参数（例如，要检查的console.log（route.customerId））。那么您可以使用路由器实例进行导航，如：

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

并在您的html代码中使用：

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

Angular 5触发从子出口的父路由器出口导航

3 个答案: