问题标签 [angular-auxiliary-routes]

我正在尝试在主路由器插座内使用辅助路由器插座。

应用程序路由

应用程序组件

页面模块

页面组件

辅助组件

错误 /page/(auxoutlet:auxpath)将看到页面组件，但出现此错误：

我正在尝试导航到嵌套的辅助路线，但我不断收到错误消息：

我试图导航到的 URL：

我的路由配置如下所示：

所以有 2 个router-outlets是modalcontainer和modalview。后者在ModalsComponent.

应用组件

模态组件

填充正常，modalcontainer但是一旦我尝试填充modalview插座，它就会出错。

我尝试过的导航方式是：

• [routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]"
• [routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['modals', 'register']}}]"
• [routerLink]="['modals', {outlets: {'modalview': ['register']}}]"
• 直接在地址栏输入http://localhost:4200/(modals:modals//modal:sign-in)
• this.router.navigate([{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]);
• this.router.navigateByUrl('/(modals:modals//modal:sign-in)');

是我的配置中的某些东西还是我访问 URL 的方式？或者这是一个错误？

我有一个主路由器插座和一个命名插座。主插座包含一个子路由器插座。当我尝试仅更改命名的插座时，它会失败 - 我被路由到默认的主路由，并且在命名的插座中没有任何反应。

AppRouter（主/AppModule）：

子路由器（独立模块）：

从 PersonPeopleComponent（在主插座和子插座#/person/8/people中匹配的 URL ），我有以下 RouterLink：person/:idpeople

taskPane命名的出口在哪里。

我期望发生的是，PersonEditPanelComponent将在taskPane指定的出口中显示，并且PersonProfileComponent在PersonPeopleComponent主要和子出口中将保持不变。相反，我看到的是Dashboard路由（我的后备路由）被加载到主出口并且taskPane出口是空的。控制台中没有记录错误。

我的链接上的 href 最终变成了#/person/8/(people//taskPane:person-edit)不起作用的东西（我在路由器链接上尝试了许多不同的排列，因此这只是一个无效 URL 的示例）。URL 必须是#/person/8/people(taskPane:person-edit)有效的（我手动测试过），但我不知道如何设置 RouterLink 以生成该 URL。

我认为路由配置正确，因为当我对其进行硬编码时 URL 有效，这意味着问题出在 RouterLink 中。

关于我做错了什么的任何线索？

谢谢。

我们正在使用辅助路由http://example.com/path(x:y/1/1)并将应用程序托管在 Azure 中的应用服务上。每次我们刷新使用辅助路由或直接导航到它的页面时，IIS 都会给出错误“从客户端检测到潜在危险的 Request.Path 值 (:) ”

除了允许:by setting之外<httpRuntime requestPathInvalidCharacters="&lt;,&gt;,%,&amp;,\,?" />，还有其他解决方案吗？

我目前的配置：

有用。NavComponent总是渲染到出口nav。特别是，它适用于以下所有类型的 URL：

请注意，路由器将不同的路由匹配到这些 URL：

• (1)是用来(c)
• (2)用于(a)和(b)

这就是为什么NavComponent每次位置更改时都会销毁并重新创建实例 from(c)到(a)。这是我需要防止的事情。我需要保留我的实例，因为它的状态、动画等。据我所知，只有当所有 URL 都使用相同的路由时才有可能，但是我找不到这样做的方法。如果我删除(1)，像这样的 URL将(c)停止显示NavComponent在nav. 显然**与此类 URL 不匹配（但我不确定为什么）。

你可以在这里看到它的实际效果：https ://stackblitz.com/edit/angular-ptzwrm

这里的正确解决方案是什么？

现在，我像在解析UrlSerializer之前一样添加(nav:)到 URL(c)中，但感觉就像是 hack。

我正在尝试将查询参数（不是路由参数）传递给我的每条辅助路由。

我想要实现的是拥有 3 个同级组件，每个组件都从它自己的辅助路由订阅和使用查询参数，并使用 3 个不同的数据源填充我的页面，从而使分页/查询成为可能并且每个独立。

我的 url 应该如下所示，遵循 Angular 的辅助路由模式：

http://mywebsite.com/search(musics:/?page=1&itemsPerPage=12&orderBy=createdAt/movies:/?page=1&itemsPerPage=12&orderBy=createdAt/tvShows:/?page=1&itemsPerPage=12&orderBy=createdAt)

然后在我的每个组件中，我可以订阅它的特定辅助路由更改，并在我导航时触发对我的 API 的请求。

我知道这可以通过路由参数实现，但我希望能够灵活地只输入所需的查询参数。这可以在Angular中实现吗？

谢谢！

我正在尝试使用 Angular 的命名出口功能来完成一些非常具体的事情，但我似乎无法让它工作。

我想做的是构建一个窗口管理器。为此，我认为新命名的网点将是完美的选择。

我想在模态中使用动态命名的路由器插座，以便我可以在那里加载任何路由。

问题是，您需要设置路由将在路由定义中使用的命名出口。我不会提前知道这些，而且一条路线可以在多个不同的出口多次加载。

我已经尽我所能找到一种方法来使用内置路由器做到这一点，但不幸的是我遇到了障碍。

有没有已知的方法可以做到这一点？

我正在尝试执行以下操作

我成功地使用 router-outlet 和 app.routing-module.ts 导航到侧导航栏。我为 Nav4 组件内的选项卡尝试了辅助路由。但它失败了。谁能帮我解决这个问题？

导入所需组件后的 app.routing-module.ts

app.component.html

Nav4component.html

当我运行应用程序时，出现以下错误：

错误：无法匹配任何路由

我有以下路线配置：

如您所见，我正在尝试将组件延迟加载到辅助插座中，但是在导航到插座内的适当路线（http://localhost:4200/container-page/(detail:first-page)时有问题的 ng-component 被渲染, 在其中, 一个新的空 router-outlet 和另一个 ng-component 在同一 DOM 级别. 这样做是新渲染的 router-outlet 完全隐藏了 ng-component 在其级别并且内容不会显示。

此行为在主要出口中未注册，仅在辅助命名出口中。有没有人成功地将组件延迟加载到辅助插座中？

我想将 Angular 辅助路由用于（非常大的）管理工具侧菜单（使用 7.2.X Angular 分支）。经过几天对极其复杂的 Angular 路由器的测试，我可以使 URL 正常工作。但是当我尝试在辅助插座中的组件之间进行路由时，我有非常奇怪的行为......

我从设计师那里得到的应用程序草图非常标准：一个通用的固定菜单在上半部分，一个动态侧边菜单在左边，第二个动态侧边菜单在右边。

我的应用程序路由模块目前类似于：

MainComponent 包含不同模块的主要和命名路由器出口：

和人员模块路由：

所有这些路由都正常工作（由于默认的辅助路由，两个第一个确实显示相同的东西）：

• /人/显示
• /人/（显示//右：第一）
• /人/（显示//右：秒）
• /人/（显示//右：第三）

现在，解决问题！我需要在这些菜单之间进行路由（首先有一个链接到第二个路由，第二个有一个链接到第三个路由）。我放置在菜单组件中的代码如下（这里是第一个，但在第二个中类似于路由到第三个）：

在 TS 中：

问题是，当我打开时/person/display，第一个菜单（这是默认菜单）正在正确显示。路由的routerLink方式是适当地添加一个链接到/person/(display//right:second). 但是，(clic)路由的方式会出现路由器错误：

我要求去routerLink和去的路线router.navigate是完全相同的，但是到目前为止，一种路由方式是有效的，而后者不是。

第二个问题是，当我打开时/person/(display//right:second)，到第三个的链接都没有工作。生成的链接routerLink很奇怪：

我希望替换部分而不是添加routerLink部分到辅助 URL。right:secondright:third

关于router.navigate路由，我收到类似的错误：

我通过谷歌搜索找到的大多数辅助路由示例与我的用例有很大不同。它们要么过于简单（通常只有一个 AppModule），要么到辅助出口的路由链接在模块之外（在 AppModule 的组件中）。

就我而言，侧边菜单中的操作可以更改菜单的内容，而不仅仅是顶级静态菜单。

我准备了一个尽可能简单的stackblitz 示例来重现我所描述的内容。

我可能错过了一些关于辅助路由的主要信息（或者更一般地关于 Angular 路由和路由的信息，这根本不容易）。如果您有任何想法来解决我的路由问题，那就太棒了。随意克隆我的 stackblitz 示例以显示一个工作示例。如果您需要更改模块和/或组件结构，请尽可能多地重构。复杂情况下的辅助路由确实缺乏详细的文档，所以如果你的答案可以包含某种解释，那就更棒了。

感谢所有阅读到这一点的人:-)