无法从Angular中命名插座中渲染的组件路由到主要插座 [英] Can't route to the primary outlet from component rendered in a named outlet in Angular

问题描述

我正在使用命名的商店，并且发现以下代码可以正常工作，将我发送到请求的页面，但仅在其他商店之外。

I'm playing around with the named outlets and I noticed that the following code works, sending me to the requested page but only if it's outside another outlet.

<div routerLink="banana">Working Banana</div>

上面的代码是在主要插座内呈现的标记的一部分时，按预期进行路由。但是，从在一个指定出口中呈现的组件执行的相同路由请求似乎根本不起作用。

When the above code is part of the markup rendered inside the primary outlet, the routing occurs as supposed to. However, the same routing request done from a component that's rendered in one of the named outlets seems not to work at all.

我不愿意在某个东西上称一个错误聪明的人已经做到了，所以我假设有一种 方法，可以在单击命名插座中渲染的组件时在主要插座中进行布线。

I'm reluctant to call a bug on stuff that smarter people have done, so I'm assuming there is a way to route in the primary outlet when clicking a component rendered in a named outlet. But how?

有关工作香蕉和不工作香蕉的演示，请参见请访问StackBlitz 。是的，我已经用谷歌搜索了。但是要找到一个适合这些东西的键组合并不容易...

For the demo of working and not working bananas see here at StackBlitz. And yes, I've googled. But it's not exactly easy to find a good key combo for this stuff...

推荐答案

问题是 routerLink = banana 执行相对于当前路线的导航。虽然您似乎想要导航到 domain.com/banana ，但是您需要一个绝对的导航。要使其处于绝对导航状态，只需添加一个正斜杠即可：

The problem is that routerLink="banana" performs navigation relative to the current route. While it seems that you want to navigate to domain.com/banana and for that you need an absolute navigation. To make it absolution navigation just add a forward slash:

<div routerLink="/banana">

这篇关于无法从Angular中命名插座中渲染的组件路由到主要插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！