Angular 5 从子插座触发父路由器插座上的导航答案

【问题标题】：Angular 5 trigger navigation on parent router-outlet from child outletAngular 5 从子插座触发父路由器插座上的导航
【发布时间】：2018-09-23 18:38:00
【问题描述】：

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

RootComponent --> 包含路由器出口
- 子组件-> 包含路由器插座
  - 大子组件 -> 包含一个按钮以触发返回根组件的导航

我的问题来自孙组件中按钮上的 routerLink 我如何导航到根组件？

应用程序路由

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

];

【问题讨论】：

按钮上的 routerLink="/" 不起作用吗？
显而易见的解决方法是使用输出将点击发送回父组件，并从那里处理路由。

标签： angular typescript angular5 angular-router

【解决方案1】：

您可以像这样使用常规 routerLink 简单地从孙子导航到根目录：

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

【讨论】：

这可行，但我的根组件的路径为“customers/:customerId/contracts/:contractId”，因此它会路由到空白屏幕，我会丢失客户 ID 等
能否请您提供您的路由器是如何配置的？

【解决方案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'];
  }
}

【讨论】：

【解决方案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) to check ）。然后您可以使用 Router 的实例进行导航，例如：

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

并在您的 html 代码中使用：

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

【讨论】：