Angular2 this.router.navigate仅触发一次 [英] Angular2 this.router.navigate fires only once
问题描述
我的页面中具有以下标签结构，并在花括号中给出了相应的URL:
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)
组件
@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.
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>
当我单击主选项卡时，将调用selectTab函数.并且由于主选项卡具有redirectUrl，因此if条件满足，并且页面从/page变为/page/c. (这只能使用一次)
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)
但是，如果我单击任何其他子选项卡(例如，URL为/page/b的Sub Tab 2)，则单击主选项卡不会重定向到/page/c，而是停留在
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.
我已经检查了if条件中的redirectUrl，它仍然是/page/c，但是没有发生重定向.
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?
编辑
@HuseinRoncevic
@HuseinRoncevic
<div *ngFor="let tab of tabs" (click)="selectTab(tab)">
编辑
路线
{
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
}
为什么不为page/:action路线创建单独的组件?
Why don't you create a separate component for page/:action route?
这是路由和导航文档中的内容在Angular.io上.
Here is something from the Routing and Navigation documentation on Angular.io.
可观察的paramMap和组件重用 在此示例中，您从Observable检索路线参数映射.这意味着在该组件的生命周期内，路由参数映射可能会发生变化.
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.
由于这个原因，我将创建一个新组件来处理路径的:action部分.
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
}
更新
在您的selectTab()函数中，沿问号分割的目的是什么?
Update
In your selectTab() function, what is the purpose of splitting along the question mark?
let route = this.router.url.split('?')[0];
您的路线不会作为查询参数附加，而是像http://something/page/a而不是http://something/?page/b那样附加到实际路线，或者您会想到. url属性将返回路由器确定的URL:/page/a或/page/b.结果的长度应为0.因此，if部分将始终为false，并且不会发生重定向.
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屋！
