指向两个不同组件的相同路由器插座
问题描述:
比方说,我有Component1和Component2。指向两个不同组件的相同路由器插座
<router-outlet>
位于Component1模板中。
的Component1
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/link1']">Link1</a>
</li>
</ul>
</nav>
<router-outlet></router-outlet>
现在COMPONENT2,我也有routerLinks,但没有路由器出口。
COMPONENT2
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/link2']">Link2</a>
</li>
</ul>
</nav>
我想这[routerLink]
从COMPONENT2点<router-outlet>
中的Component1
所以我怎么可能重视routerLinks到路由器特定网点?我尝试使用路由器命名,但它没有锻炼。
文件夹结构:
src/app/components
--- Component1
--- component1.component.html
--- Component2
--- component2.component.html
答
你可以做在routerLink
URL使用../
就去做,最终都将指向父router-outlet
(幕后它进入一个网址片段回)。
[routerLink]="['../link2']"
我编辑了我的问题与文件夹结构。 ../的问题是它不在我的Component2文件夹中。所以我不得不做类似../Component2/link2的事情?但它似乎并没有工作 – Dino
@masterfan我不是在说文件夹结构,我在谈论URL片段.. –
但它仍然没有找到父路由器插座。如果我从Component2中删除路由器插座(我不想在那里,因为我想将它链接到Component1中的路由器插座),我得到:“无法找到要加载的主插座...” – Dino