角标头相关的routerLink

时间:2018-09-10 02:27:20

标签: angular angular5 angular6 angular-routing angular-router

我试图在Angular6中创建一个全局标头,其中包含动态链接的超链接,每个页面的超链接都不同。超链接始终引用相对于当前URL的某些页面。但是routerLink-s在全局头中不能相对工作。这意味着,当我在应用程序根标题中有一个routerlink时,我尝试建立到当前延迟加载的模块的相对链接,该模块当前正在使用并且已为其加载菜单。

意思是,如果我使用的是网址

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

全局菜单包含一个超链接

<a routerLink="./profile">

然后单击该routerLink,将带我到example.com/profile。它充当绝对链接。现在,如果我在同一页面上将相同的代码插入到作为主体加载的员工组件中,那么它的工作方式将有所不同,因为它将重定向我。

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

我不明白,为什么它不将全局路由器url状态作为相对性基础,而是尝试从根(路由器头中的-)进行路由。

当相对URL在此处无法正常工作时,如何管理Angular标头中的全局相对菜单?

2 个答案:

答案 0 :(得分:1)

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

./只是相对路径,因此,如果将<a routerLink="./profile">放在app.component中,它将重定向到example.com/profile,并且如果您将相同的链接放在employee.component,它将重定向到http://example.com/company/8/employee/profile

如果您需要绝对路径重定向,只需添加/(例如:<a routerLink="/profile">),以便无论使用哪个组件,它都将重定向到example.com/profile

答案 1 :(得分:0)

几周后我找到了答案。

允许您将relativeTo传递到路由器,这在这些情况下会有所帮助。您可以转发其他组件ActivatedRoute并将其用作相对论基础。

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