从组件添加参数角2路线导航无 [英] Add Parameter to Angular 2 Route from Component without Navigating

问题描述

使用我目前的code，我试图我Accordion组件内做深层链接。

通过导航到 dev.local /＃/手风琴，然后点击手风琴冠军，我想更新的路线是这样的：

dev.local /＃/手风琴/ 2

不过，我不希望一旦设置导航到该路径。从本质上讲，如果有人假设复制此网址，将他们返回时，他们复制它已打开的确切手风琴。

我遇到的问题是，我申请以下code到我的手风琴链接设置参数：

 ＆LT; A [routerLink] =['手风琴'，{标签：'4'}]＆GT;＆LT; / A＆GT;
 

这工作，但实际上它和导航重新初始化该组件。我需要能够点击此链接，路由设置为 dev.local /＃/手风琴/ 4 不通过浏览到它重新初始化组件。

下面是我目前的路线：

  @RouteConfig（[
    {
        路径：'/手风琴，
        成分：手风琴，
        如：AccordionNew
    }，
    {
        路径：'/手风琴/：标签'，
        成分：手风琴，
        如：手风琴
    }
]）;
 

解决方案

如果该辅助路线不帮助，你可以试试我的解决方案，我用一个smiliar问题：

1. 建立一个RootAccordionComponent。设置选择为您
   AccordionComponent并用它作为RootAccordionComponent标签
   模板（例如）。也放在这个模板的地方。对于RootAccordionComponent您使用的路径：'/手风琴/ ...'。RouteConfig



2. （如果尚未完成）建立一个tabId属性的AccordionService。


3. 构建TabIdAccordianComponent与空的模板。使用路径：'/手风琴/：标签'它为RouteConfig。现在组件是做的唯一事情，就是从RouteParams获取tabId并将其保存到AccordionService。


4. 当初始化您AccordianComponent，从AccordionService得到tabId。

这样，你可以得到tabId的时候，如果有人直接到与tabId的网址您AccordianComponent是initilized，但如果用户点击手风琴也不会重新加载。

请参阅此Plunker一个工作示例：
http://plnkr.co/edit/5HEgIUZGRP3Cfqh6LvzA?p=$p$pview

如果你在一个单独的窗口中启动preVIEW你还可以看到路由。例如。如果您加载 http://run.plnkr.co/WOpQaPkFafJ7uU8Y/#/accordion/2 选定的手风琴将被设置为2。

希望这有助于，虽然它不是最干净的解决方案。

RouteConfig去AccordionRoot：

  @RouteConfig（[
  {路径：'/手风琴/ ...'，名称：'AccordionRoot'，成分：AccordionRootComponent}，
]）
出口类AppComponent {}
 

实际AccordionRootComponent：

  @Component（{
    模板：`
      ＆LT;路由器出口＆GT;＆LT; /路由器出口＆GT;
      ＆所述;手风琴成分＆gt;＆下; /手风琴成分＆gt;`，
    指令：[ROUTER_DIRECTIVES，AccordionComponent]
}）@RouteConfig（[
    {路径：'/：tabId'，名称：'AccordionTab'，成分：TabIdAccordionComponent，useAsDefault：真正}
]）
出口类AccordionRootComponent {}
 

该TabIdAccordionComponent：

  @Component（{
    模板：''
}）出口类TabIdAccordionComponent {  构造函数（私人routeParams：RouteParams，私人accordionService：AccordionService）{
    让tabId = + this.routeParams.get（tabId）;
    this.accordionService.tabId = tabId;
  }
}
 

该AccordionComponent从服务利用的tabId的：
    出口类AccordionComponent实现的OnInit {
        构造函数（私人accordionService：AccordionService）{}
      selectedAccordionId：数;

  ngOnInit（）{
    this.setSelectedAccordion（this.accordionService.tabId）;
  }  setSelectedAccordion（tabId：数字）{this.selectedAccordionId = tabId;}}
 

With my current code I am attempting to do deep linking within my Accordion component.

By navigating to dev.local/#/accordion and then clicking on an accordion title, I want to update the route to look like:

dev.local/#/accordion/2

But I do not want to navigate to this path once it is set. Essentially, if someone were to hypothetically copy this URL it would return them to the exact accordion that was opened when they copied it.

The problem I'm running into is that I'm applying the following code to my accordion links to set the parameter:

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

This works but it actually navigates and re-initializes the component. I need to be able to click this link, set the route to dev.local/#/accordion/4 without re-initializing the component by navigating to it.

Here are my current routes:

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

解决方案

If the Aux Routes don't help, you can try my solution I used for a smiliar problem:

1. Build a RootAccordionComponent. Set a selector for your AccordionComponent and use it as a tag in the RootAccordionComponent template (e.g. ). Also place a somewhere in this template. For RootAccordionComponent you use "path: '/accordion/...'" RouteConfig.

2. (If not already done) build a AccordionService with a tabId attribute.
3. Build a TabIdAccordianComponent with an empty template. Use "path: '/accordion/:tab'" for it as RouteConfig. Now the only thing the component does, is to fetch the tabId from RouteParams and save it to the AccordionService.
4. When initializing your AccordianComponent, get the tabId from the AccordionService.

That way you can get the tabId when your AccordianComponent is initilized if someone goes directly to the url with an tabId, but it won't reload if the user clicks on an Accordian.

See this Plunker for a working example: http://plnkr.co/edit/5HEgIUZGRP3Cfqh6LvzA?p=preview

If you launch the preview in a separate window you can also see the routes. E.g. if you load "http://run.plnkr.co/WOpQaPkFafJ7uU8Y/#/accordion/2" the selected Accordion will be set to 2.

Hope this helps, although it is not the cleanest solution.

RouteConfig to get to AccordionRoot:

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

The actual 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 { }

The TabIdAccordionComponent:

@Component({
    template: ''
})

export class TabIdAccordionComponent {

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

The AccordionComponent making use of the tabId from the service: export class AccordionComponent implements OnInit { constructor(private accordionService: AccordionService){} selectedAccordionId: number;

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

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

}

这篇关于从组件添加参数角2路线导航无的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！