typescript Angular 4：路由到路由不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46200912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4: Routing to a route doesn't work
提问by user3255061
There is some fundamental concept of routing in Angular 4 that I don't understand.
Angular 4 中有一些我不明白的基本路由概念。
index.html:
索引.html：
<base href="/">
File structure:
文件结构：
- app
|- app.routings.ts
|- collections
|-- collection.component.ts
|-- collection.component.html
|-- collectioninfo.component.ts
|-- collectioninfo.component.html
|- shared
|-- header.component.html
|-- header.component.ts
I have a link in my header.component.html:
我的 header.component.html 中有一个链接：
<a class="nav-link" [routerLink]="['/collections']">
Collections
</a>
If I click it I land on localhost:4200/collections. When a button is clicked, the url is programmatically changed (in collection.component.ts):
如果我点击它，我会登陆 localhost:4200/collections。单击按钮时，url 以编程方式更改（在 collection.component.ts 中）：
this.router.navigate(['/collections/', collection.name]);
I end up on localhost:4200/collections/name - all fine. Now I programatically want to get back to /collections (in collectioninfo.component.ts):
我最终在 localhost:4200/collections/name 上 - 一切都很好。现在我想以编程方式回到 /collections（在 collectioninfo.component.ts 中）：
this.router.navigate(['/collections']);
But that doesn't work. The url doesn't change and I get an error that says a parameter couldn't be loaded - so apparently /collections/name is being loaded again. Thought it might is a path issue, but things like this also don't work:
但这不起作用。url 没有改变，我收到一条错误消息，指出无法加载参数 - 所以显然 /collections/name 正在再次加载。认为这可能是路径问题，但这样的事情也不起作用：
this.router.navigate(['../collections']);
Additional info: When I manually reload the page while being on /collections I'm being forwarded to the home page again, but I think that is another issue and not related to this behaviour.
附加信息：当我在 /collections 上手动重新加载页面时，我再次被转发到主页，但我认为这是另一个问题，与此行为无关。
app.routing.ts:
app.routing.ts:
const APP_ROUTES: Routes = [
...
{ path: 'collections', component: CollectionComponent },
{ path: 'collections/:id', component: CollectionInfo },
];
采纳答案by user3255061
Turns out my firebase code is messed up - it tries to reload the page before going to another route. That caused an error, because some parameters that handed over from the previous route were missing.
原来我的 firebase 代码搞砸了 - 它试图在转到另一条路线之前重新加载页面。这导致了错误，因为从之前的路由中传递过来的一些参数丢失了。
export const routing = RouterModule.forRoot(APP_ROUTES, { enableTracing: true })
in app.routing.ts was very useful for debugging.
在 app.routing.ts 中对调试非常有用。
回答by tgrass12
In your relative path this.router.navigate(['../collections']);you are trying to navigate to localhost:4200/collections/collections. Try this.router.navigate(['../']);
在您this.router.navigate(['../collections']);尝试导航到的相对路径中localhost:4200/collections/collections。尝试this.router.navigate(['../']);
If this doesn't work, also supply the ActivatedRoute as a relativeTo parameter:
如果这不起作用，还可以提供 ActivatedRoute 作为 relativeTo 参数：
constructor(route: ActivatedRoute, router: Router) {}
navigate() {
this.router.navigate(['../'], { relativeTo: this.route });
}
relativeToworks by creating a path relative to whatever entry you provide, and it does not necessarily need to be the current route.
relativeTo通过创建相对于您提供的任何条目的路径来工作，它不一定需要是当前路线。
