javascript - 在不导航的情况下从组件向Angular 2路线添加参数

使用当前的代码，我试图在我的 Accordion 组件中进行深层链接。

通过导航到dev.local/#/accordion，然后单击一个 Accordion 标题，我希望将路线更新为:
dev.local/#/accordion/2
但是，一旦设置了该路径，我就不想导航到该路径。本质上，如果有人假想复制此URL，它将把他们返回到他们复制它时打开的确切 Accordion 。

我遇到的问题是，我将以下代码应用于 Accordion 链接以设置参数:

<a [routerLink]="['Accordion',{tab:'4'}]"></a>

这可以工作，但实际上可以导航并重新初始化组件。我需要能够单击此链接，将路线设置为dev.local/#/accordion/4，而无需通过导航到它来重新初始化组件。

这是我目前的路线:

@RouteConfig([
    {
        path: '/accordion',
        component: Accordion,
        as: 'AccordionNew'
    },
    {
        path: '/accordion/:tab',
        component: Accordion,
        as: 'Accordion'
    }
]);

最佳答案

如果辅助路线无济于事，您可以尝试使用我的解决方案，以解决更常见的问题:

构建一个RootAccordionComponent。为您的选择器设置一个选择器
AccordionComponent并将其用作RootAccordionComponent中的标记
模板(例如)。还要在此模板中放置一个位置。对于RootAccordionComponent，请使用“path:'/accordion/...'”RouteConfig。

(如果尚未完成)使用tabId属性构建一个AccordionService。

使用空模板构建TabIdAccordianComponent。使用“path:'/ accordion /:tab'”作为RouteConfig。现在，该组件唯一要做的就是从RouteParams中获取tabId并将其保存到AccordionService。

初始化AccordianComponent时，请从AccordionService获取tabId。

这样，如果有人使用tabId直接转到URL时，当AccordianComponent初始化时，您可以获得tabId，但是如果用户单击Accordian，它将不会重新加载。

有关工作示例，请参见此柱塞:
http://plnkr.co/edit/5HEgIUZGRP3Cfqh6LvzA?p=preview

如果在单独的窗口中启动预览，则还可以查看路线。例如。如果您加载“http://run.plnkr.co/WOpQaPkFafJ7uU8Y/#/accordion/2”，则所选的 Accordion 将设置为2。

希望这会有所帮助，尽管它不是最干净的解决方案。

RouteConfig进入AccordionRoot:

@RouteConfig([
  {path:'/accordion/...', name: 'AccordionRoot', component: AccordionRootComponent},
])
export class AppComponent { }

实际的AccordionRootComponent:

@Component({
    template: `
      <router-outlet></router-outlet>
      <accordion-component></accordion-component>`,
    directives: [ROUTER_DIRECTIVES, AccordionComponent]
})

@RouteConfig([
    { path: '/:tabId', name: 'AccordionTab', component: TabIdAccordionComponent, useAsDefault: true}
])
export class AccordionRootComponent { }

TabIdAccordionComponent:

@Component({
    template: ''
})

export class TabIdAccordionComponent {

  constructor(private routeParams: RouteParams, private accordionService: AccordionService){
    let tabId = +this.routeParams.get("tabId");
    this.accordionService.tabId = tabId;
  }
}

使用服务中的tabId的AccordionComponent:
导出类AccordionComponent实现OnInit {
构造函数(私有(private)AccordionService:AccordionService){}
selectedAccordionId:数字；

  ngOnInit(){
    this.setSelectedAccordion(this.accordionService.tabId);
  }

  setSelectedAccordion(tabId: number){this.selectedAccordionId = tabId;}

}