问题标签 [router-outlet]

我在我的应用程序中遵循这个官方示例，它显示了如何<router-outlet>在 {N} 中实现 a。我的应用程序的唯一区别是我想在模式页面中使用它。但它不是<router-outlet>模态中的元素，而是将内容加载为新页面。

模态组件

app.routing.ts

app.module.ts

知道为什么/first并/second导航到新页面而不是将其加载到模式的路由器出口中吗？

更新：

这似乎是一个错误。请看下面我的回答。

我正在使用 Angular 2 开发一个博客网站。现在我想在用户访问我的网站时在登录页面上显示一个注册表单/登录表单，只有注册表单不会显示菜单或标题。

现在，当用户登录时，他们将重定向到 /dashboard 并查看菜单、标题和内容

现在如何开始。是否可以使用两个路由器插座？

注册布局图片： http: //prntscr.com/dwh1qg

仪表板布局： http: //prntscr.com/dwh2lp

我的模板如下所示：

假设我的网址是：

我想切换到 page2 并使用 routerLink 指令删除辅助插座。我尝试了以下方法：

在这两种情况下，页面都切换到 page2，但rightpanel仍处于活动状态。我可以解决的唯一方法是将以下代码放入page2的构造函数中：

由于许多原因，这不是一个好的解决方案。

使用角度 2.4.3，路由器 3.4.3

我有一个*ngFor生成的列表，其中每个项目都是从json.

我想要的是router-outlet在隐藏其他项目的同时在我的视图中获取单击的项目。

将其视为产品列表和产品卡。当您单击特定项目时，您将重定向到该项目产品的完整页面。所以，我需要同样的方法。

现在点击我得到所需的 URL。所以我不需要为router-outlet视图设置一个特殊的 URL，只需在那里渲染点击的项目。

我的*ngFor结构：

我的服务：

我的json：

还有我的路线：

我在“父母”路由器插座内渲染子组件内容时遇到问题。

这是我的主要路线：

其中“登录模块”是急切加载的，而我的“公证模块”是延迟加载的。

我的“公证模块”有自己的路线，即：

我想（如果可能的话）在第一个路由器出口（我在代码中将其称为包装器路由器出口）中加载 PersonInsertEditComponent （当前在路由器出口内呈现，我称为合同子路由器出口）。

但是我不知道该怎么做。我尝试过使用插座属性，但这篇文章似乎存在插座和延迟加载路由的问题 - Angular2 路由器 - 辅助路由，我得到了与该问题中描述的相同的错误......

感谢您在高级的帮助！

更新

我注意到的是，它可以通过稍微操纵路线来完成，看起来像这样：

因此，通过将这 2 条路由（'person'、'person/:id'）上移一层，它们会在 'Wrapper router-outlet' 内呈现，这正是我希望它们被呈现的地方，但这只是没有似乎不是正确的方法...这些路线应该是子路线，这样做会使他们与父母成为兄弟姐妹...如果有人能指出我正确的方向，我将不胜感激。

我在我的应用程序中使用命名路由器来在其中一个共享模块中实现路由。

这是 AppRoutingModule (root) 中的配置：

然后，当用户导航到第一个路径，即“/home”时，该模块有一个单独的路由模块，具有以下配置：

对于第一个根配置，我使用主出口来呈现组件，对于第二个配置，我使用命名路由器“章节”。我从主路由器插座获得的 URL 如下：

但是有了进一步命名的路由器出口，它是这样的：

如何为命名的路由器插座也有这样的 URL：

我尝试在我的应用程序的子模块内使用命名路由器插座，但是当我将它们放在子模块内时，我收到丢失路由的错误：

有一个示例，主应用程序级别的“辅助”插座工作良好，但是当我将“辅助破折号”插座放在仪表板模块中时，不能正常工作：

http://plnkr.co/edit/1VXpKqbVVZnOLRLtpoxY?p=preview

问题是我不得不像这样将路径属性留空：

我做错了什么，或者这是Angular2路由中的一些错误？

我有一个有两个出口的应用程序组件：

template: '<router-outlet></router-outlet><router-outlet name="popup"></router-outlet>'

我按照此链接中的示例创建路由和 routerLinks，只要 routerLinks 在应用程序组件内，一切正常。但是，我创建了一个主布局组件，里面有一个菜单，这样我就可以在所有页面上重用它，并使用 loadChildren 来加载里面的相应模块和组件。

问题是当我将弹出出口的 routerLinks 移动到菜单中时，它包含主路由的尾部斜杠，并且生成的 url 不起作用。因此，例如这个 routerLink：

如果它被放置在应用程序组件中，则创建 url 'localhost/mainroute(popup:login)' ，如果它被放置在菜单组件中，则创建 'localhost/mainroute/(popup:login)'。

虽然第一个 url 有效，但第二个 url 产生错误： 错误：无法匹配任何路由：'mainroute'

我不明白为什么它以不同的方式对待这两种情况。我也不明白，即使 url 'localhost/mainroute/'有效，第二个生成的 url 也不会因为尾部斜杠。

有人能帮我吗？

我有一个带按钮的父组件，其功能是在里面显示子组件。我正在使用命名路由器插座导航到孩子。我的尝试基于以下示例：https ://github.com/vsavkin/router_mailapp （显示“撰写”弹出窗口）

路由

如您所见，父组件的路径包含可变段（agentId），因此我不能使用绝对路径路由。父组件和子组件都导入到模块文件中。

HTML 模板：

显示方法

按下按钮后，页面响应

当程序尝试导航到新的 url 时，它被创建为：

我需要的是获得以下网址，因为再生参数是额外佣金的孩子：

有趣的是，当我将第二个 url 插入地址栏中时效果很好，子组件显示在其父组件内 - 问题是在 router.navigate() 函数创建的 url 中括号前缺少斜杠（“/”）。

示例中的相同内容效果很好，因此我发现的类似问题的其他解决方案也可以，是否有隐藏的东西我看不到？谢谢

在我的根组件中，我有以下模板：

我想为同一路线加载主要组件中的router-outlet一些组件和次要组件中的一些其他组件（当然，我有几条路线）。router-outlet因此，我这样定义我的路线：

当页面加载时，它运行良好，我HomeSummaryComponent在主要router-outlet和AskSummaryComponent在旁边router-outlet。但是，在导航中，我有这个：

当我单击此链接时，主要内容将router-outlet被替换，PaymentComponent但旁边router-outlet仍显示AskSummaryComponent.

我还尝试通过“/payements-aside”重命名第二个“付款”路线，并将链接替换为：

但它仍然不起作用。但是，当我直接访问时http://localhost:8083/payments(aside:payments-aside)，它确实可以工作，但这个 URL 并不是很干净……因为它不能用于面向公众的网站。

有谁知道如何实现这个简单的需求？