问题标签 [router-outlet]

我有一个带有路由器出口的根应用程序组件，并且路由是从主模块路由加载的，该路由在其子路由中使用带有 loadchildren 的延迟加载。在 home 组件中有一个 router-outlet，在 home 的所有子模块中都有 router-outlet，它们是延迟加载的。路由工作正常，但子路由也被加载到根路由器出口中。例如：- 组件“testCreateComponent”正在加载 localhost:4200/test/create 以及 localhost:4200/create。

示例代码级别如下：-

app.component.html

应用程序路由.module.ts

home.component.html

家庭路由.module.ts

测试组件.html

测试路由.module.ts

对于进入我们网站的 SEO 和旧版外部链接，我们需要为已弃用的 url 提供后备路由。命名插座的事情变得棘手。现在试图找到正确的设置来指定重定向到更新的命名出口的路由。

例如：
https://url.com/prod/000(myOutlet:foo) 应该重定向到 https://url.com/prod/000(newOutlet:some/foo) 而 000 当然是动态的

现在一些反映新旧路线的代码：

如何指定旧实现重定向到新路径：'：var' 路由？

当然要提到 myOutlet 在新部署的应用程序中不再存在，我们仍然需要能够对其做出反应。

我创建了一个可以用作游乐场的 stackblitz，它包含一个具有动态 id 和命名路由器出口的路由，如本主题中所述。 https://stackblitz.com/edit/angular-router-outlet-redirectto

你好 Angular 程序员们，

在我的应用程序中，我有一个呈现“容器”组件的模块，该组件又具有一个菜单组件和一个命名的路由器插座（这里的想法是有一个子导航菜单和页面）。一旦我第一次导航到“容器”路由，就会发生导航，并且命名的路由器出口正确显示在 children[] 中指定的第一个子路由。但是，当我尝试导航到另一个“子”路由时，导航不会发生 - 但 URL 地址会发生变化 - 不会引发错误（干净的控制台）。

1. 初始导航 URL：导航到ActiveDealComponent，呈现菜单，命名的路由器出口也呈现“仪表板”组件。

   URL：http://localhost:4200/deal/123456/(dealOutlet::dashboard)，由以下代码调用（位于锚标记内）：

   [routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [':dashboard'] } }]"

2. 后续导航尝试：命名路由更改，但命名路由器出口不显示新的所需组件（仪表板仍然存在）。

   http://localhost:4200/deal/123456/(dealOutlet::assets)由以下代码调用（位于锚标记内）：

   [routerLink]="['/deal', this.dealId, { outlets: { dealOutlet : [':assets'] } }]"

交易模块.ts

主动交易.component.html

注意：如果我更改子声明顺序，让我们先说“：资产”，然后说“：仪表板：”，然后资产被渲染但仪表板没有。

我在这里想念什么？

提前致谢。

更新以澄清我的问题

我正在尝试让有孩子的路线和命名的网点工作，但没有运气。最初的想法是构建一个选项卡式导航，在我的应用程序中有深层链接。为了更好地理解，我已经将我的示例 stackblitz 项目分解为真正的问题。 似乎它正在导航到路线“/（列表：第一/（详细信息：第二））”，但DetailComponent不会加载。 我需要一个具有多个子路由和命名插座（'list'，detail'，...）的主路由来表示一个 url 链构建：/overview/(list:first)（第一个选项卡），/overview/(list :first/(detail:second)) （第二个选项卡），依此类推。

a 标签上的[routerLink]看起来像这样： <a [routerLink]="[ { outlets: { detail: ['second'] } }]">Component 1</a>

经过更多研究后，似乎/overview/list/(detail:detail/1)找到了路线： NavigationEnd {id: 2, url: "/overview/(list:first/(detail:second))", urlAfterRedirects: "/overview/(list:first/(detail:second))"}...

我的overview.component.html 看起来像这样：

当命名的插座“详细信息”在我的 list.component.html 中时，它正在工作。

但这不是我想要的。

所以我认为我没有路由配置问题，而是嵌套组件的问题。这个案子不是故意的吗？你有其他想法来解决这个问题吗？

这是我的路由器模块：

请查看我的 stackblitz 项目：https ://stackblitz.com/edit/angular-jgattb

谢谢您的帮助！

我处于这种情况

在这个地址localhost:4200/pathlvl1/pathlvl2我有一个组件，它加载一个带有路由器插座的 HTML 页面

链接有效。

我会在组件中以编程方式使用此链接

但是有问题

我不认为是路由的问题，因为直接链接有效

这是错误

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：“假”。当前值：“真”。

有什么建议么？

我对 Angular 4 路由器和组件有一些问题。我正在尝试做的事情。我有一个视图（超级用户），其中包含 2 个出口（侧边菜单和内容）。

在路由器中，我有 2 个孩子（侧边菜单和内容）的超级用户，它有自己的路由器，但我得到无法匹配任何路由。URL 段：http://localhost:4200/superuser/contexts uri上的“超级用户/上下文”。来源如下。

应用路由器

超级用户组件.html

SideMenuComponent.html

ContextsComponent.html

谢谢！

我有一个登录组件（位于class="login"）和一个仪表板（位于class="main"）组件。我还有一个位于class="login"div 中的寄存器组件。现在我知道您不应该<router-outlet>在同一个模板中使用两个，但如果它们没有同时显示，我看不出问题出在哪里。我也尝试过使用该[routersLink]="[{outlets}]"方法，但无法正常工作。可能是<router-outlet>因为*ngIf.

所以问题是，当我从仪表板组件中走出来时，我看到了登录组件。当我从登录到注册组件时，路由会更新，但注册组件不会触发。如果我直接从登录页面进入注册页面，它会路由并触发注册组件。

我有一个包含 layout.component 的 Angular 2 应用程序。在 layout.component.html 我有一个侧边菜单，在路由器插座部分的侧边菜单中，我运行我的其他组件。代码是这样的：

在侧导航中，我有一些项目来运行组件的状态。但是当我点击其中一个时，侧导航会重新加载，有时它无法获取项目。我怎样才能只重新加载路由器插座而不是侧导航？

这是路由代码：

我正在管理组及其成员。为此，我创建了两个不同的模块，一个用于组，另一个用于成员。我正在通过延迟加载为成员加载路线。这是我的组路由模块：

const routes: Routes = [ { path: 'groups', children: [ { path: '', component: GroupListComponent, }, { path: ':id', children: [ { path: '', component: GroupDetailComponent, }, { path: 'edit', component: GroupFormComponent }, { path: 'members', loadChildren: 'app/groups/members/members.module#MembersModule', } ], }, ], } 使用此版本，一切都按预期工作。

• 在我的GroupDetailComponentandGroupFormComponent中，我得到了我的参数，this.route.params.subscribe(params...它位于 params['id']。
• 在我的MemberDetailComponent(/groups/:id/members/:member_id) 中，我得到了我的参数this.route.snapshot.parent.params

但是，我现在想添加一个选项卡菜单来通过切换选项卡来管理组及其成员，因此我将组路由更新为：

const routes: Routes = [ { path: 'groups', children: [ { path: '', component: GroupListComponent, }, { path: ':id', component: GroupComponent, children: [ { path: '', redirectTo: 'detail', pathMatch: 'full', }, { path: 'detail', component: GroupDetailComponent, }, { path: 'edit', component: GroupFormComponent }, { path: 'members', loadChildren: 'app/groups/members/members.module#MembersModule', } ], }, ], }

我只是在其中显示一个菜单GroupComponent。

• 现在要在 my 中获取我的组 id GroupDetailComponent，我需要使用this.route.snapshot.parent.params
• 但是我无法从我的组件中获取我的组 IDMembersModule

难道我做错了什么 ？我刚刚添加了一个“共享”模块，它只是该组的一个菜单。

谢谢你的帮助

我正在用 Angular 做一些关于如何定义“完全包含”的模块的实验（这意味着每个模块不仅应该有自己的组件定义，还应该有它们的路由，并且，如果有必要，保护它的每个路由） ，但我在嵌套路由和各自的router-outlets.

这个实验的主要目的是无论用户是否通过身份验证，都有不同的布局：

• 如果未通过身份验证，将显示一个带有登录表单的简单页面（还有一个更改为“忘记密码？”类型的表单，在另一条路线上）
• 如果已通过身份验证，则布局（我称为private-layout）应该始终有一个导航栏和一个router-outlet那里，其中应显示经过身份验证时可访问的页面。

问题是，由于某种原因，private-layout没有被注入，它的嵌套路由直接注入到 main 上router-outlet。

我有一个 Stackblitz 可以更好地说明这个场景：https ://stackblitz.com/edit/angular-bsqgfl

如您所见，当应用程序启动时，它直接进入 AuthModule（因为它与空路由匹配），在那里您可以看到注入 Auth 的 'login' 组件router-outlet。您甚至可以尝试从“登录”切换到“忘记密码”，“忘记密码”嵌套内容将按预期注入。但是，如果您尝试将 URL 更改为“测试”，而不是看到导航栏和注入的测试组件，导航栏根本不会显示，因为测试组件是直接在 main 上注入的router-outlet。

我很确定这与我定义路线的方式有关，但我希望它们尽可能靠近它的模块，但我不知道如何处理这个问题。我在这里遇到了一些答案，但他们都在一个地方定义了所有可能的应用程序路由，但我希望我的分布在每个相应的模块中。