问题标签 [angular-auxiliary-routes]

目前正在发生的事情是，当您导航到任何辅助路由时，URL 页面将是

我的网址/（路由器名称：辅助）

我想要的是，它应该是这样的

我的网址/路由器名称/辅助

这甚至合乎逻辑吗？我不知道它是否会与任何主要路由相矛盾。

谢谢

我正在开发一个角度管理面板项目。管理员登录部分已完成，在仪表板中，我有一个侧面导航菜单，单击菜单项时，需要在主体 div 中加载相应的组件。我的主要出口插座是app.component.html这样放置的：

这工作得很好。以下是我的app-routing.module.ts

在app.module.ts

在仪表板组件 html 中，我正在尝试执行此操作

但是，单击“管理新闻”菜单项，页面未重定向，并且我在控制台中收到以下错误：

我被卡住了，通过教程无法弄清楚我在这里做错了什么。请帮忙。

延迟加载和使用命名的插座。我已经按预期加载了命名的插座，但是当它加载时，它也在清除主插座。我希望主插座保留它正在显示的组件，并且只更改命名插座以显示新组件。

感谢@pixelbits 的一些帮助......这是一个不起作用的例子https://stackblitz.com/edit/angular-sw6cmc

我不希望主要出口改变。

html

路线：

这些中的任何一个都将填充 dialogOutlet 但清除主要

这似乎应该工作，但没有。

预期的结果是主路由器出口将视图保留在其中，并且只有命名出口发生变化。目前，命名的出口正在按预期发生变化，但主要出口正在被清除。

我将root路由定义为

有module1.routing.ts：

当我导航到/module1/mod1child2以下位置时，此代码有效：

我上面图片的 HTML 页面是：

我无法加载

{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}

通过点击：

<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>

我究竟做错了什么。我试过了

但这似乎也不起作用

所以我有这个设置。如您所见，它为左路由器设置 ExploreAllComponent 的默认路径。我希望第一个 routerLink 指向插座的主路径，但这样它不起作用。我已经尝试使用'/'，但它也不起作用。

路由

html

在我的 Angular 8 应用程序中，首次加载主页时，它会将(sidebar:homesidebar)辅助路由附加到 url 并加载 homesidebar 就好了。在 homesidebar 上，有一个登录按钮，单击它会导航到登录页面。登录页面的 url 包含预期的 homesidebar 并在侧面显示 homesidebar，但是在用户登录后，侧边栏不会更改为用户的仪表板特定的侧边栏，并且 homesidebar 仍然可见，并(sidebar: homesidebar)显示 url 栏。

我遇到的第二个问题是我的代码已设置，因此如果用户尝试访问用户特定的仪表板而不首先登录，就像他们只是在 url 栏中输入用户仪表板组件的 url，那么他们将被带到登录页面，它会在侧面显示 homesidebar，但它没有显示它，甚至没有显示 homesidebar。根本没有显示侧边栏，并且 url 位置栏没有指定辅助路线（它只显示：）localhost:4200/login。

如果用户从这个格式错误的页面登录，那么他们将被重定向到各自的仪表板页面，但根本不显示各自的侧边栏。实际上，根本没有显示侧边栏，也没有在 url 栏中显示。通过调试应用程序，我确认所有变量都在代码中生成，用于使用 router.navigate 函数进行重定向。我该如何解决这些问题？谢谢。

更新：

登录后，当我在chrome浏览器中手动重新加载页面时，可以看到右侧边栏。

路线：

员工警卫：

登录组件：

Angular 8无法匹配延迟加载模块的辅助（命名）出口上的任何路由

大家好，

是的，这个问题被认为是一个重复的问题。我已经从这里阅读了讨论Angular 5 Cannot match any routes on named outlet of lazy loading module

我已经按照这个例子https://stackblitz.com/edit/angular-material-dialog-issue-resolved?file=app%2Fdemo%2Fbuyer-pin%2Fbuyer-pin.component.ts在 mat 对话框中进行路由.

但是，在我的情况下，命名路由无法与下面的错误屏幕匹配：

我在做什么：

在 app.routing 中：它正在导航（新引号）

在 new-equote.routing 中，我正在路由到另一个子模块（product-journey）：

最后，在 product-journey 路由模块中，我重定向到一个空组件，该组件根据我下面的示例打开对话框（上面给出了链接）：

这就是我在 router-outlet 中传递名称的方式：

这是调用对话框打开功能的空组件（对话框容器）：

一旦我想导航到 /new-equote/product-journey/dialog(step:product)，

错误来了：错误：无法匹配任何路由。URL 段：“产品”

我花了几个小时来解决这个问题，但没有运气。

我在直接访问辅助路由时遇到问题。当我在本地访问 /home/(post:12) 时，一切正常。但是当我在将应用程序部署到 github 页面时尝试这样做时，会出现 Wild 404。

基本上辅助路线是加载弹出模式。

这是路由器模块：

我想让它像在本地服务器上一样工作。有任何想法吗？

我很想建立一个包含两个主要部分的网站。一次是登录页面，一次是带有子页面的仪表板。

仪表板应该有一个带有内容区域的侧边菜单。各种组件应相应地显示在内容区域中。

你有什么想法我怎么能做到这一点？我首先用辅助路线解决了这个问题。

但是，这样做的缺点是 URL 现在看起来像这样：

而且我无法通过“/登录”访问该页面。这是辅助路线的代码：

在 app-routing.modules.ts

以及导航到登录页面的代码：

和 app.component.html：

我怎样才能解决 URL 的问题，或者充其量为模板创建第二个路由器出口，该模板带有侧边菜单和组件的动态内容？

我正在尝试进行嵌套子路由调用以加载到辅助路由器插座中，但我似乎无法使其工作。我不断得到Error: Cannot match any routes. URL Segment:'header/secondary/abc'

StackBlitz 链接： https ://stackblitz.com/edit/angular-ivy-t3x2cw?file=src/app/header/header.component.ts

我的预期结果是在普通路由器出口的左侧加载 Secondary 和 Abc 模块/组件，<router-outlet></router-outlet>在 aux route 的右侧加载测试组件<router-outlet name="aux"></router-outlet>。如下图所示。