Angular2 this.router.navigate 只触发一次

Question

我的页面中有以下选项卡结构，大括号中给出了相应的 URL：

           Main Tab (/page)
           /    |    \
          /     |     \
         /      |      \
        /       |       \
Sub Tab 1   Sub Tab 2   Sub Tab 3
(/page/a)   (/page/b)   (/page/c)

组件

@Input() route: string = '';

selectTab(tab) {
  let route = this.router.url.split('?')[0];

  /* Here redirectUrl = "/page/c" */
  if (tab.redirectUrl.length > 0) {
    // console.log(tab.redirectUr); gives /page/c

    this.router.navigate([tab.redirectUrl]);
    // This works but reloads the page and is a very bad idea.
    // window.location.href = tab.redirectUrl;
  }
}

Component.html

注意： 实际代码有一个自定义元素，我将其显示为 <div> 只是为了说明 redirectUrl 是如何传递的。

<div route="/page" [redirectUrl]="/page/c"></div>

当我单击 主选项卡 时调用 selectTab 函数。由于 主选项卡 具有 redirectUrl if 条件满足并且页面从 /page 变为 /page/c。（这只有效一次）

但是，如果我单击任何其他 子选项卡 （例如 Sub Tab 2 和 URL /page/b），则单击主选项卡不会'重定向到 /page/c，而不是停留在 /page/b。

我已经检查了if条件里面的redirectUrl，它仍然是/page/c，但是重定向没有发生。

我应该怎么做才能强制重定向？

编辑

@HuseinRoncevic

<div *ngFor="let tab of tabs" (click)="selectTab(tab)">

编辑

路线

{
  path: 'page',
  component: MyComponent
},
{
  path: 'page/:action',
  component: MyComponent
}

Answer 1

你可以试试这个：

{ path: 'page', component: PageParentComponent,
        children: [
          { path: '', redirectTo: 'a', pathMatch: 'full'},
          { path: 'a', component: AComponent},
          { path: 'b', component: BComponent}
        ]
 }

在HTML

this.router.navigate(['page/a']); // or
this.router.navigate(['page/b']);

Answer 2

我不确定为什么你的路由定义指向同一个组件：

{
    path: 'page',
    component: MyComponent
},
{
    path: 'page/:action',
    component: MyComponent
}

为什么不为 page/:action 路由创建一个单独的组件？

这是 Angular.io 上的 Routing and Navigation 文档中的内容。

Observable paramMap and component reuse In this example, you retrieve the route parameter map from an Observable. That implies that the route parameter map can change during the lifetime of this component.

They might. By default, the router re-uses a component instance when it re-navigates to the same component type without visiting a different component first. The route parameters could change each time.

我相信这是你的问题。您并没有真正更改组件。相反，您是在一遍又一遍地重复使用同一个组件。出于这个原因，路由器正在重用相同的组件实例。

出于这个原因，我将创建一个新组件来处理您路线的 :action 部分。

{
    path: 'page',
    component: MyComponent
},
{
    path: 'page/:action',
    component: IHandleActionPartHereComponent
}

更新

在你的selectTab()函数中，沿问号拆分的目的是什么？

let route = this.router.url.split('?')[0];

您的路线不会作为查询参数附加，而是会附加到实际路线，如 http://something/page/a 而非 http://something/?page/b 或您想象的那样。 url 属性将 return 由路由器确定 url：/page/a 或 /page/b。结果的长度应为 0。因此，您的 if 部分将始终为 false，并且不会发生重定向。

Angular2 this.router.navigate 只触发一次

Angular2 this.router.navigate fires only once

angular2-template

angular2-routing

angular

更新