Question

我的页面中有以下标签结构，大括号中给出了相应的网址：

           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，网址为/page/b），则点击主标签页不会重定向到/page/c而是留在/page/b。

我已经检查了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文档。

可观察的paramMap和组件重用   在此示例中，您从Observable中检索路径参数映射。这意味着路径参数映射可以在此组件的生命周期内更改。

他们可能会。默认情况下，路由器在重新导航到相同的组件类型时重新使用组件实例，而不首先访问其他组件。路线参数每次都可以改变。

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

因此我会创建一个新组件来处理路由的: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属性将返回路由器确定的网址：/page/a或/page/b。结果的长度应为0.因此，if部分始终为false，不会发生重定向。

Angular2 this.router.navigate只触发一次

2 个答案:

更新