Question

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

导航到dev.local/#/accordion然后点击手风琴标题，我想更新路线如下：

dev.local/#/accordion/2

但我不想在设置后导航到此路径。基本上，如果有人假设复制这个URL，它会将它们返回到复制它时打开的确切手风琴。

我遇到的问题是我将以下代码应用于我的手风琴链接以设置参数：

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

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

以下是我目前的路线：

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

Answer 1

如果Aux Routes没有帮助，您可以尝试我用于解决一个熟悉问题的解决方案：

构建RootAccordionComponent。为您的设置选择器 AccordionComponent并将其用作RootAccordionComponent中的标记模板（例如）。也在这个模板中放置一个地方。对于RootAccordionComponent，您使用＆＃34; path：＆＃39; / accordion /...&# 39;＆＃34; RouteConfig。
（如果尚未完成）使用tabId属性构建AccordionService。
使用空模板构建TabIdAccordianComponent。使用＆＃34;路径：＆＃39; / accordion /：tab＆＃39;＆＃34;作为RouteConfig。现在组件唯一能做的就是从RouteParams获取tabId并将其保存到AccordionService。
初始化AccordianComponent时，请从AccordionService获取tabId。

这样你可以在你的AccordianComponent被启动时获得tabId，如果有人用tabId直接进入url，但如果用户点击Accordian则不会重新加载。

有关工作示例，请参阅此Plunker： http://plnkr.co/edit/5HEgIUZGRP3Cfqh6LvzA?p=preview

如果您在单独的窗口中启动预览，您还可以查看路线。例如。如果你加载＆＃34; http://run.plnkr.co/WOpQaPkFafJ7uU8Y/#/accordion/2＆＃34;选定的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;
  }
}

AccordionComponent利用服务中的tabId：导出类AccordionComponent实现OnInit { 构造函数（private accordionService：AccordionService）{} selectedAccordionId：number;

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

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

}

在没有导航的情况下从Component添加参数到Angular 2 Route

1 个答案: