使用我当前的代码,我试图在 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'
}
]);
最佳答案
如果 Aux Routes 没有帮助,您可以尝试我用于解决类似问题的解决方案:
构建一个 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,它不会重新加载。
有关工作示例,请参阅此 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;}
}
关于javascript - 无需导航即可从组件向 Angular 2 路由添加参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35046485/