Angular 2 - 没有可怕 URL 的命名路由器出口答案

【问题标题】：Angular 2 - Named router outlets without horrible URLsAngular 2 - 没有可怕 URL 的命名路由器出口
【发布时间】：2017-02-05 04:26:07
【问题描述】：

我想要两个路由器插座，一个是主插座，一个是模态插座。当导航到/login 时，我想在主出口中显示我的主组件，在模式出口中显示我的登录组件。像这样的：

{
   path: 'login',
   component: HomeComponent
},
{
   path: 'login',
   component: LoginComponent,
   outlet: 'modal'
}

这可以通过使用像 /home(modal:login) 这样可怕的辅助 URL 来实现，但当然没有人希望他们的 URL 看起来像那样。

如果没有这些 URL，我该如何解决？

【问题讨论】：

从您的插座名称奇怪的猜测告诉我您正在使用第二个路由器插座来显示模态，使用这种方法怎么样：blog.brecht.io/Modals-in-angular2？
这可能是一个不好的例子，但我想说：“对于这条路径，在出口 a 中打开组件 a，在出口 b 中打开组件 b”
如果你想在多个路由器插座上使用 Angular 路由器，你必须忍受这些 url。没有办法绕过它，因为路由器和 URL 基本上是结合的。
@FedericoP 我真的不明白为什么不可能有一个单一的路径来定义两个出口的内容。这并不意味着我们必须打破 url 和路由器之间的关系。他们仍然会一起工作，只是为了这条路，我说将使用两个带有两个组件的插座。

标签： angular angular2-routing

【解决方案1】：

您可以通过NavigationExtras 和skipLocationChange: true 为您的用户隐藏丑陋的网址。

const navigationExtras: NavigationExtras = {
  skipLocationChange: true,
};
this.router.navigate([{ outlets: { modal: 'popup' } }], navigationExtras);

您还可以将路由器插座的名称从 model 重命名为更易于使用的名称，例如 popup：

/home(popup:login)

但话又说回来，也许这还不够漂亮：D

【讨论】：

【解决方案2】：

仅供参考，我们遇到了同样的问题并根据此回复解决了：https://stackoverflow.com/a/58915611/9260456

【讨论】：

【解决方案3】：

你为什么不去减少组件的路线，

{
    path: 'login',
    children: [
        {
            path: '',
            component: HomeComponent
        },
        {
            path: '',
            component: LoginComponent,
            outlet: 'modal'
        }
    ]
}

这将确保当您的路由为 /login 时，HomeComponent 将进入主出口，而 LoginComponent 将进入名为“modal”的路由器出口。

【讨论】：

这看起来像是两条不同的路线，相同的路径指向不同的出口。这说得通。但是，我不明白为什么需要减少组件的路线。为什么我不能只有两条路径共享 login 路径，每条路径都指向不同的出口？
太棒了！使用此路由重构，默认情况下会使用相同的干净 url 触发两个路由。你有这个技巧的解释吗？