问题标签 [router-outlet]

我正在尝试将路由与模块一起使用...

应用程序模块

使用导入 RouterModule.forRoot(appRoutes)

仪表板.module

使用导入 RouterModule.forChild(dashboardRoutes)

包含模块

使用 import RouterModule.forChild(contaRoutes)

这个想法是：

• 到应用程序的默认路由是仪表板
• 到仪表板的默认路由是 conta
• conta 的默认路由是 contaList

当我运行此代码时，应用程序正在加载App > Conta > ContaList而不是App > Dashboard > Conta > ContaList我希望。

我的模板（应用程序、仪表板和 Conta）中有一个路由器插座。

我究竟做错了什么？

ng new在一个新的Angular 种子应用程序（

我确实尝试过注入Router：

事情变得更奇怪了。只要我有router-outlet标签，它仍然停留在“正在加载...”。一旦我删除它（但Router仍在注入），我会得到一个空白屏幕（即，甚至不是“正在加载...”）。

app.module.ts 文件：

app.component.ts：

app.component.html：

更新

我收到四个浏览器错误：

任何人都知道为什么我在尝试实例化使用的组件时遇到问题底部的错误<router-outlet>？

console.log('then');没有被调用，所以也许编译有问题？

app.component.ts

app.component.html

应用程序路由.module.ts

app.component.spec.ts

我看到的错误：

使用 @angular/router": "3.4.7"。

这里提出的解决方案不再起作用。

手动导航按预期工作

http://localhost:5000/app/build/#/product-module/product （在命名插座中正确显示概览组件）

（在命名插座中正确显示详细信息组件）

问题

无法找出执行编程导航的正确方法：

出现以下错误：

错误：无法匹配任何路由。URL 段：“详细信息”。

我有以下Angular Route配置

ManageComponent是一个沙盒组件，将在其中渲染PreviewComponent和。EditComponent

用户用例将用户重定向到http://localhost:4200/#/(manage:manage/bar/12762)与预览组件匹配的用户。这里一切正常。

从PreviewComponent和当用户点击一个按钮时，我想做一个相对导航到EditComponent拥有，当导航完成时，http://localhost:4200/#/(manage:manage/bar/12762/add/foo)

我试过了

和

但每次，用户都会被重定向到http://localhost:4200/#/add/foo.

我怎样才能做这个导航？

我正在尝试从其父级更改 a 中的活动组件。看看Ionic 是如何做到的，我认为它应该与此类似（非常简化）：

显然这是行不通的。有没有办法做类似的事情？

先感谢您！

我正在开发使用 angular 2 指示的小型应用程序。[身份验证 + 2 个屏幕]，我在管理路由参数时遇到问题。

我对路由文件、app.routing.ts主体和子路由文件admin.routing.ts进行了设置，每当我成功通过身份验证时，都会重定向到主路径，在此页面中，我必须访问组件，由子路由器，每当我单击链接时，我都希望在同一屏幕上加载内容，但路由器会重新加载整个页面。

app.routing.ts

adminRouting.ts（子）

home.component.html

模板.component.html

数字

它不是在指定位置加载内容，而是加载另一个页面。

更新：见下文

因此，我有一个应用程序，其中有两个不同的组织，当用户使用该应用程序时，我因此想根据他所属的组织加载不同的组件。

方法 1：在路由文件中做一个简单的条件。

这有效，但仅在本地主机上，当我推送到 heroku 并在生产中运行时，应用程序只会提供错误的组件。我已经尝试将日志输出添加到这个 user-route.ts 文件中，日志在 localhost 上按预期显示，但在生产环境中什么都没有。localStorage 中的“用户”对象在这两种情况下都存在并且是相同的。 注意：这种方法在 Angular 2 上也可以正常工作，在 Angular 4 中，在生产环境中运行时路由文件似乎会发生一些事情，但谁知道呢.. 可能它以某种方式编译，导致 if 条件中断。

方法 2. 使用路线和警卫。为不同的组织添加两个警卫。有效，但路线必须不同。下面的代码不起作用，因为总是检查第一个空路由，但第二个没有。我需要路径为空（''）。

由于关于守卫和条件路由的每个主题似乎都是关于是否显示“家”或“登录”，我真的不知道是否有更好的方式来使用守卫。理想情况下是这样的：

方法 3. 在父模板中使用 ngIf。这也有效，但是当进一步向下移动到“DetailsComponent”时，我必须手动隐藏和显示组件

那么，您如何做一些看似微不足道的事情，例如根据条件显示不同的组件？

更新 1：

最接近的，虽然没有工作，但我得到了我想要的行为是使用命名路由器插座。

加载了正确的组件，但仅适用于两条顶部路线。那些有空路径的。对于带有 id 参数的两条路线，我得到

这很奇怪，因为如果我手动输入网址，一切都会正确加载：/调用：

-

-

每当我根据需要刷新路由器插座组件数据的数据更改搜索内容时。

在第一次路由时，我使用共享服务共享数据，但它不起作用，因为在 init 调用时只调用一次。对于同一路由的下一个数据，它将不起作用。

我需要在常量搜索组件之间共享数据以更改路由器（路由器出口）组件。有时对于相同的路由，需要呈现两个不同的数据。

在我们的 Angular 4 应用程序中，我们有多个命名的路由器出口。所以网址就像： http://localhost:3000/main/(outletName1:Printers//outletName2:Printers)

假设一个组件显示在一个特定命名的路由器出口中。组件在构造函数中注入了 Router、ActivatedRoute 等。

组件如何从那些注入的对象（或其他可能的对象）中检索路由器出口的名称？