问题标签 [angular-router]

我正在使用 Angular 4。当我使用“ng serve”运行我的 Angular 应用程序时，它运行良好。那是它以上下文根作为“/”运行的时候。

我的应用程序需要使用 java webapp 进行编译，并作为 war 文件的一部分部署到 servlet-container。这个应用程序在上下文根“cmcwebapp”下运行。

我的 index.html 有元素

就在“头”元素下。当我编译角度应用程序时，我使用命令

编译完成后，我复制 dist 文件夹的内容并将其粘贴到 java webapp 并创建一个 war 文件。

当我使用“ http://localhost:8080/cmcwebapp ”在浏览器上运行它时。所有的 javascript、css 和图像加载正常。URL 更改为“ http://localhost:8080/cmcwebapp/cmcwebapp/ ”，我得到这个“错误：无法匹配任何路由。URL 段：'cmcwebapp'”。

我在 app.module.ts 中有这个作为我的路由定义

这是我的 app.component.html

我无法弄清楚我哪里出错了

我有一个显示联系人列表的应用程序，可以选择单个联系人并查看其详细信息。联系人详细信息页面有几个选项卡，用于显示有关联系人的子信息（个人资料、接触点和联系信息）。以下是相关网址：

查看联系人列表：

• http://localhost:4200/contact/list

查看给定联系人的所有接触点

• http://localhost:4200/contact/84/touch-points/list

这是构建联系人列表路由以及联系人详细信息延迟加载路由的路由数据：

这是接触点模块的路由数据。

当我导航到 时http://localhost:4200/contact/list，Angular 会尝试加载与http://localhost:4200/contact/84/touch-points/list. 似乎这样做是因为“列表”也在延迟加载的模块中定义。如果我在接触点模块的路由数据中将“列表”更改为“历史”，则http://localhost:4200/contact/list加载相应的组件。

Angular 4 路由器应该能够区分这些路由： ( http://localhost:4200/contact/list, http://localhost:4200/contact/84/touch-points/list) 并加载适当的组件。

我需要对我的路由定义进行哪些更改以方便在同一功能区域（即联系人）内的多个路由中使用“列表”？

--- 2017 年 8 月 1 日更新 ---

我创建了以下演示此问题的 plunker：

• plunker 演示路线被压扁

单击 plunker 中的“联系人列表”链接会加载接触点列表，而不是加载联系人列表。Touch Points 是 Contact 域中的延迟加载模块。

应该发生的是导航到联系人列表。单击联系人应将您带到联系人详细信息页面，允许您单击接触点链接以查看所选联系人的接触点列表。

联系人模块的列表路由 ( /contact/list) 使用 'list' 作为它的路由。接触点列表路由需要是/contact/:id/touch-points/list. 因为在两个路由中都使用了，所以定义的最后一个路由会覆盖第一个路由，随后在导航到路由list时会加载接触点列表的组件。/contact/list

谢谢你。

我有 3 个级别的路由：app.module> admin.module> manage-users.module。

出于某种原因，匹配的 URL 路径''重定向到''路径 inmanage-users.module而不是HomeComponent.

我的 app.routing 中有以下路线：

我的管理员路由：

我的管理用户路由：

问题1：组件oninit函数使用router.data.subscribe获取数据和父数据。

为什么可以得到父数据？

我在路由器文档中找不到信息。angular2路由器

问题2：为什么无法获取root父数据？在 app-router.module.ts 我定义了
数据：{pageTitle: 'youare', test:123213213},

我无法在 CrisisListComponent 中获取数据。

应用路由器.module.ts

危机中心路由.module.ts

危机列表.component.ts

在 CrisisListComponent ，打印日志："asdfsadfsadf{"preload":true,"you":"are"}"

我看了这个问题：How to set Bootstrap navbar “active” class in Angular 2? 它显示了如何链接到单独的页面。但是，就我而言，我想使用锚链接到同一页面上的某个部分。

在下面提到的代码中，它没有转义字符串插值。

它的渲染href="/%23Home"为href="#Home"

2021 年 3 月更新

Angular 团队最终为此合并了 PR，您可以查看https://github.com/angular/angular/pull/40303了解更多详细信息。

要使用它，只需输入

哪里options会有 IsActiveMatchOptions 的形状

或者简单地接受一个布尔值exact

原始问题

我在 Angular 中使用 routerLink 如下

所以当 URL 看起来像 .active 类被添加到 li 标签

如果 URL 被更改offset或更改numberOfItems为不同的值，则 .active 类将被删除，例如。

我浏览了角度文档并设法通过添加另一个 routerLink 使其工作，但将其隐藏如下。

似乎上述方法有点hack。当路由器参数带有可选查询参数时，我可以设置任何配置以使 routerLinkActive 工作吗？

我正在使用 Angularfire2 库来登录用户并从 Firebase 数据库中获取数据，但是当用户点击注销时，会向控制台抛出以下错误：

无法在行读取 null 的属性“uid”

这是在任务组件方法的第uid2 行抛出错误的属性：ngOnInit

然后我调用unsbuscribe上述订阅以避免该ngOnDestroy方法的内存泄漏：

这是由位于主组件上的按钮触发的退出方法（主组件的路由器出口显示上述组件）：

这是我第二次在 Angular 路由器中遇到一些奇怪的事情。我目前正在使用 Angular v4.3.1。

我使用相同的组件来创建和编辑对象。这就是我想为这个组件定义两条路由的原因，一条有 id，另一条没有。

我试图创建以下路线：

但在这种情况下，我的 id 参数永远不会设置。

我正在检索它：

我目前正在使用故障回复：

但我想了解我的第一个解决方案不起作用的原因。

谢谢你的帮助 ！

我正在使用 angular2 路由。当用户在搜索字段中重新输入值并点击搜索时，需要重新加载相同的组件但具有不同的路由参数。

这是我的 ResultsComponent 的路由路径

此函数会更改 URL，但不会重新初始化组件。

在 angularjs，ui-router 我可以这样实现。

我如何在angular4中做到这一点？

我是新的 Angular 2 开发。我添加了一个组件，在这个组件内我还有一些其他的子组件。我的文件夹结构如下：

在parentComponent.html我添加<router-outlet></router-outlet>

我有从 child1 到 child 2 和 child 2 到 child3 的导航。我也可以向后移动，反之亦然。搬回来我正在使用 this._location.back();.

当我使用后退按钮向后移动时。它显示当前路线中的上一页组件。

例如 ：

当我使用后退按钮从 child2 移动到 child1 时。child1 路线仍在 child1 页面中显示子 html 部分。

对于路由，我使用的是这样的：

我不知道为什么会这样。请帮忙！！

版本信息