Angular2 this.router.navigate 只触发一次 [英] Angular2 this.router.navigate fires only once

问题描述

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

 主选项卡 (/page)/|\/|\/|\/|\子标签 1 子标签 2 子标签 3(/page/a) (/page/b) (/page/c)

组件

@Input() 路由:string = '';选择标签(标签){let route = this.router.url.split('?')[0];/* 这里redirectUrl = "/page/c" */如果(tab.redirectUrl.length > 0){//console.log(tab.redirectUr);给/页/cthis.router.navigate([tab.redirectUrl]);//这有效，但会重新加载页面，这是一个非常糟糕的主意.//window.location.href = tab.redirectUrl;}}

Component.html

注意: 实际代码有一个自定义元素，我将它显示为

只是为了说明 redirectUrl已通过.

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

selectTab 函数在我单击 Main Tab 时被调用.由于 Main Tab 有 redirectUrl，if 条件满足并且页面从 /page 转到 /page/c.(这只有效)

但是，如果我点击任何其他子标签(比如带有 URL /page/b 的 Sub Tab 2)，然后点击 main标签不会重定向到 /page/c，而是停留在 /page/b.

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

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

编辑

@HuseinRoncevic

编辑

路线

<代码>{路径:'页面'，组件:我的组件},{路径:'页面/:动作'，组件:我的组件}

解决方案

我不知道为什么你的路由定义指向同一个组件:

<代码>{路径:'页面'，组件:我的组件},{路径:'页面/:动作'，组件:我的组件}

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

这是路由和导航文档中的内容在 Angular.io 上.

<块引用>

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

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

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

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

<代码>{路径:'页面'，组件:我的组件},{路径:'页面/:动作'，组件:IHandleActionPartHereComponent}

更新

在你的selectTab()函数中，沿着问号分割的目的是什么?

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

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

I have the following tab structure in my page, with it's respective URLs given in braces:

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

Component

@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

NOTE: The actual code has a custom element, I'm showing it as a <div> just to show how redirectUrl is passed.

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

The selectTab function is called when I click Main Tab. And since the Main Tab has redirectUrl the if condition satisfies and the page goes from /page to /page/c. (This only works once)

But, if I click any other Sub Tab (say Sub Tab 2 with URL /page/b), then clicking on main tab doesn't redirect to /page/c, instead stays at /page/b.

I have already checked the redirectUrl inside if condition, it's still /page/c, but redirection doesn't happen.

What should I do to force redirection?

EDIT

@HuseinRoncevic

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

EDIT

Routes

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

解决方案

I am not sure why your route definition points to the same component:

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

Why don't you create a separate component for page/:action route?

Here is something from the Routing and Navigation documentation on Angular.io.

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.

I believe that this is your issue. You are not really changing the components. Rather, you are reusing the same component over and over again. And for that reason router is reusing the same component instance.

For that reason I would create a new component that handles the :action part of your route.

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

Update

In your selectTab() function, what is the purpose of splitting along the question mark?

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

Your route will not be appended as a query parameter, but rather it will be appended to the actual route as in http://something/page/a not http://something/?page/b or however you imagined this. The url property will return the url as determined by the router: /page/a or /page/b. The length of your result should be 0. Because of that your if part will always be false and no redirection will occur.

这篇关于Angular2 this.router.navigate 只触发一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！