javascript - 无需导航即可从组件向 Angular 2 路由添加参数

Question

使用我当前的代码，我试图在 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'
    }
]);

Answer 1

如果 Aux Routes 没有帮助，您可以尝试我用于解决类似问题的解决方案:

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

2. (如果尚未完成)构建一个带有 tabId 属性的 AccordionService。
3. 使用空模板构建 TabIdAccordianComponent。使用“path: '/accordion/:tab'” 作为 RouteConfig。现在该组件唯一要做的就是从 RouteParams 获取 tabId 并将其保存到 AccordionService。
4. 在初始化 AccordianComponent 时，从 AccordionService 获取 tabId。

这样，如果有人使用 tabId 直接访问 url，您可以在 AccordianComponent 初始化时获取 tabId，但如果用户单击 Accordian，它不会重新加载。

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

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

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

到 AccordionRoot 的 RouteConfig:

@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) Accordion 服务: Accordion 服务){} selectedAccordionId: number;

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

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

}