问题标签 [router-outlet]

我有一个应用程序，在我的 app.component.html 中有一个路由器插座，但是一个名为 EventDetailsComponent 的嵌套组件我想要另一个带有两个子路由的路由器插座。

简单地说，我只需要一个组件（EventDetailsComponent），它有自己的视图，还有 2 个可以路由到的子视图。当父/子组件初始化时，我将默认导航到 createSession 组件

我遇到的问题是当我尝试在 addSession() 方法中导航时出现此错误：

error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'events/2'

在按钮或锚标记上使用 routerLink 指令时，我没有这个问题，如下所示：<button [routerLink]="['/events/2', {outlets: {'nav': ['session']}}]"></button>

eventDetailComponent.html

在 app.module 中加载的 Routes.ts

我真的很想知道在使用 router-outlet 时如何正确地为 router.navigate() 提供参数。特别是为什么找不到提供父路由'/events，2，...'？任何想法将不胜感激

我使用多个路由器出口来加载我的组件。外层router-outlet用来加载登录、主页、404等最基本的组件。我使用嵌套router-outlet来加载主页的子组件。该路由器插座嵌套在 home.component 中。

home.component.html

app.module.ts

HomeComponent 和 LoginformComponent 需要从外部路由器出口加载。Home 组件包含名为“homeRouter”的内部路由器插座，我想用它来加载主页的子组件。但是内部路由器的导航不起作用。我尝试使用 router.navigate() 方法和 URL 访问每个组件。但是他们两个都没有按预期工作。

谁能告诉我这段代码有什么问题。我检查并尝试了几个关于同一问题的先前问题，但没有一个工作正常。

这是我为不同组件尝试过的 URL

1. http://localhost:4200 dashboardComponet（这个有效）
2. http://localhost:4200/user userComponent（不起作用。路由到 notFoundComponent）
3. http://localhost:4200/user/U001 userDetailComponent（不工作。仍然路由到 notFoundComponent）

我想在我的 Angular 应用程序中的两个插座之间导航。

首先，我的第一个观点app.html：：

然后，我的application.html模板，它是一些孩子的包装状态：

我的路线定义：

我的登录功能进行重定向：

那么我的问题是什么：我可以轻松地在登录和注册视图之间导航（我对这两个视图使用一个组件），但我无法访问应用程序/注释。我收到错误消息：

那么我做错了什么？我的代码中的错误在哪里？

在我的应用程序中希望有一个默认路由到我的子路由，如果给定experiments/1路由器将路由到experiments/1(browsePanel:overview)

我目前一直在使用这个网站作为我的参考，它有一个几乎与我想要实现的示例相同的示例，这是他们的代码：

他们的代码比我想要做的更复杂，但由于某种原因，我收到了这个错误："Invalid configuration of route 'experiments/:id/': a componentless route cannot have a named outlet set"

这是我的代码：

假设他们的代码是功能性的并且是一种好的方法，我不明白为什么我会因为在无组件路由中有一个出口而得到这个错误。我确实删除了“outlet：'browsePanel'”并使错误消失，但在提供“experiments/1”时它不会路由给孩子

如果我不能将出口放在我的重定向路径中，我如何路由到辅助路由？谢谢

更新

在使用@Davide Perozzi 方法后，它修复了重定向到路由出口的问题，没有 id 的实验。

问题在于路线“experiments/:idLab”。它似乎无法正确识别 id，如果我像这样“/experiments/1”导航到 url，则会导致此异常：

当我像'experiments/1/(browsePanel:23)'那样导航到完整时，路由解析为正确的插座并加载了组件，但我得到了这个异常：

这两个例外肯定是出于同样的原因，无法匹配带有 id 的父路由。

不过，我很难看到我对带有 id 的路线所做的事情有什么问题。

问题：我有一个惰性模块想要在我的 app.component.html 中使用弹出路由器。

我的应用程序组件模板中有以下内容：

src/app/app.component.html

我的应用模块及其路线：

/src/app/app-routing.module.ts

/src/app/app.module.ts

我的懒惰模块及其路线：

/src/app/lazy/lazy.module.ts

/src/app/lazy/lazy.module.ts

当我收到此错误时，我似乎无法让它工作：

请注意，如果我在下面的 AppModule 中导入 LazyModule，这可以完美地工作：

尽管这违背了它作为延迟加载模块的目的。那么如何让延迟加载的模块使用应用程序组件 html 模板中存在的名为“app-popup”的辅助路由器出口？

更新：

我导航到这样的路线：

/src/app/lazy/lazy.component.html

这个 SO answer建议我如何根据路由将组件放入两个单独的路由器插座中。但是组件之间不能相互通信（除非使用单独的服务）。

所以我想知道是否可以基于路由输出组件并且仍然可以通过输入和输出在组件之间轻松通信？

重要提示：组件是并行的，它不是父组件中的子组件。

我正在开发一个带有一些链式出口路由的 Angular 4 应用程序，但在使用路由出现弹出窗口时遇到了一些麻烦。基本上弹出路由的路径是“pages/admin/user-management/new”，路由是这样配置的：

第一个组件定义了这个模板和路由：

pages 模块定义了这个：

最后，管理模块定义了这一点：

但是我无法弄清楚如何以显示弹出窗口的方式配置 routerLink，尝试了这个和很多变体：

但我总是收到：

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。URL 段：'user-management%2Fnew'

随着所有三个 , 和 的弃用，/deep/我>>>如何::ng-deep设置路由器插座兄弟姐妹的样式？

:host /deep/ router-outlet + * {height: 100%}在他们宣布打算放弃对上述选择器的支持之前，我曾经这样做过。

在我的 Angular 应用程序中，我有一个根app.component组件和几个子组件。我的app.component.html简单看起来像这样：

对我来说，问题是我希望我的所有子组件页面都被包围，<div class="container-fluid"但. 我不希望我被限制在放入它的盒子里。home.componenthome.component.html.container-fluid

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

PS 我知道在我的简化示例中，我可以只应用一些特殊的 CSS，home.component但假设它是一个更大的项目，并且有一些子组件需要这种特殊处理。

我会尽量保持简单和简洁。

我们正在使用 Angular 4。通常解决方案是在以前的版本中添加观察者，但这些不再存在，因此需要一些现实世界的知识来实现​​可能是一个简单问题的解决方案。

我们的 main.ts 文件中有 3 个组件

因此，在登录和注销时刷新视图（组件）时我们遇到了问题。

在“登录”时，使用单独的 router_outlet，在成功登录时，我们导航到用户表，这会导致 init 重新加载用户。但是，由于这只是更改 router_outlet，因此标头不会刷新以显示现在的“注销”和“重置密码”选项。因此，解决方案需要触发 headed_component 和 router_outlet 的刷新。

第二个问题是，在“注销”时，这是在 header_component 中完成的，因此标题中的选项更改为“登录”和“忘记密码”。这次的问题是 router_outlet 没有刷新以删除登录为您提供的附加功能（编辑、删除、添加）用户。

我查看了 Angular.io，文档并没有真正涵盖我们正在使用的设置。当然，这可能只是我对它的解释。

任何想法表示赞赏。

提前谢谢了

刘易斯

更新：好的，所以我在这方面取得了一些进展，但是我遇到了一些死胡同

我已经实现了可观察的概念

headerComponent 有 constructor(private _loginService: LoginService, private _authService: AuthService) { this.isLoggedIn = _loginService.getLoggedInStatus.subscribe((loggedIn: boolean) => this.changeLoggedInStatus(loggedIn)); }

用户组件也有很多相同的

loginService 有 ` export class LoginService { @Output() getLoggedInStatus: EventEmitter = new EventEmitter();

注销this.getLoggedInStatus.emit(false)时我触发，但用户组件未收到此消息

有任何想法吗？