Angular header 相对 routerLink

Question

我正在尝试在 Angular6 中创建一个全局 header，其中包含 hyperlink 的动态列表，每个页面都不同。 hyperlinks 总是引用一些页面，相对于当前 URL。但是 routerLink-s 在全局 header 中相对不起作用。这意味着，当我在应用程序根目录 header 中有一个路由器 link 并且我尝试将相对 link 设置为当前正在使用的延迟加载模块时我已经加载了菜单。

意思是，如果我在 URL

http://example.com/company/8/employee

并且全局菜单包含一个超级link

<a routerLink="./profile">

然后点击那个routerLink，带我去举例。com/profile。它充当绝对 link。现在，如果在同一个页面上，我将相同的代码插入作为主要 body 加载的员工组件，它的工作方式会有所不同，它将我重定向到。

http://example.com/company/8/employee/profile

我不明白，为什么它不以全局路由器 url 状态作为相对基础，而是尝试从根路由，其中​​ header 是 - 在路由器树。

当 URL-s 中的 header 中的全局相关菜单无法正常工作时，我如何才能管理 header 中的全局相关菜单？

Answer 1

由于 ./ 是 routerLink 的前缀，它将把当前的 URL 视为其重定向的基础。

./ 只是一个相对路径，所以如果你把 <a routerLink="./profile"> 放在 app.component 中，它会重定向到 example.com/profile，如果你把相同的 link 在 employee.component 中，它将重定向到 http://example.com/company/8/employee/profile

如果您需要绝对路径重定向，只需添加 /（例如：<a routerLink="/profile">），这样无论组件如何，它都会重定向到 example.com/profile

Answer 2

几周后我找到了答案。

您可以将 relativeTo 传递给路由器，这在这些情况下会有所帮助。您可以转发另一个组件 ActivatedRoute 并将其用作相关性基础。

this._router.navigate(['../../method'], {relativeTo: this._activatedRoute});