在沒有導航的情況下從Component添加參數到Angular 2 Route

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沒有幫助，您可以嘗試我用於解決一個常見問題的解決方案：

1. 構建RootAccordionComponent。 為AccordionComponent設置一個選擇器，並將其用作RootAccordionComponent模板中的標簽（例如）。 也在這個模板中放置一個地方。 對於RootAccordionComponent，您使用“path：'/ accordion / ...'”RouteConfig。

2. （如果尚未完成）使用tabId屬性構建AccordionService。
3. 使用空模板構建TabIdAccordianComponent。 使用“path：'/ accordion /：tab'”作為RouteConfig。 現在組件唯一能做的就是從RouteParams獲取tabId並將其保存到AccordionService。
4. 初始化AccordianComponent時，從AccordionService獲取tabId。

這樣你可以在你的AccordianComponent被啟動時獲得tabId，如果有人用tabId直接進入url，但是如果用戶點擊Accordian則不會重新加載。

有關工作示例，請參閱此Plunker： 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;
  }
}

AccordionComponent利用服務中的tabId：導出類AccordionComponent實現OnInit {constructor（private accordionService：AccordionService）{} selectedAccordionId：number;

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

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

}