问题标签 [angular2-router3]

我有以下代码<a routerLink="./edit/{{thing.name}}">{{thing.name}}</a>。然后在编辑路由器上我有以下...

constructor( private route: ActivatedRoute ) { // If we have a param the close link goes back 2 level, otherwise it is 1 this.route.params .map(params => params['name']) .subscribe((id) => { if(id){ this.closeLink += "../" } }); ... }

我注意到我可以将原始 HTML 更改为<a [routerLink]="['edit', {name: thing.name}]">{{thing.name}}</a>. 但是，现在 url 更改为../thing/edit;name=asdsadsa而不是/edit/asdsadsa. 这两个 url 都有效，但后者需要返回 2 个级别，而前者需要返回 1 个。是否有路由器服务或其他东西我可以用来告诉我需要返回多少级别。这一定会变得充满活力，我不确定我是否会永远知道thing。

我有以下代码...

我正在尝试进行单元测试，但我的第一次尝试失败了......

因为它需要路由器构造函数的参数。在这里我看到...

但是我的依赖项似乎没有APP_ROUTER_PROVIDERS或没有Mock任何地方，所以我认为它可能是陈旧的（或者我需要依赖项）。

我该如何模拟呢？这对我正在进行的测试甚至都没有关系。

如果我使用路由器的navigate方法以编程方式导航

this.router.navigate(['/articles', {id: 1}]);结果网址是/articles;page=1

第二种方式

this.router.navigate(['/articles', id]);结果网址是/articles/1

在这两种变体中，我都可以通过this.activatedRoute.params.forEach((params: Params) => {});

那么除了风格有什么区别吗？

PS 发现与查询参数和矩阵参数之间的差异有关的问题

我发现了很多ActivatedRouteObservable 喜欢params或url订阅但未取消订阅的示例。

• 路由对象和订阅是否会自动销毁并为每个组件创建新创建？
• 我是否必须关心退订那些Observables？
• 如果不是，您能否解释一下Router. routerState?

我想根据路由器routerLink中的一些来显示/隐藏 s 。Data指令完成了，但我错过了最重要的部分......

例如，我有以下路由器配置（省略组件）：

现在我想问如果is或Router.RouterouterLink/foo/bar/baz/123

我查看了Router源代码（https://github.com/angular/angular/blob/master/modules/%40angular/router/src/router.ts），但找不到一些简单的方法来做到这一点。尤其是它如何处理这些:id变量。

当然我可以迭代Router.config，越来越深。但是我必须解析这些变量、正则表达式等。必须有一种更简单的方法，因为角度路由器也必须在内部完成所有这些事情。

你有什么想法/解决方案吗？

我有一个项目概述作为入口页面。

当我单击打开项目按钮时，projectId 将传递给 Milesstones 视图。当我在里程碑视图中时，我想使用 projectId 激活任务视图。

如果里程碑/任务是子路线，这种情况很容易实现，但它们不是！所有 3 个视图都属于顶级路由。

AFAIK 使用子路由意味着组件也必须是 ui 层次结构中的子级，因此我不能有 3 个并行/并排视图。

我还能如何实现我想要的？

这是一个可以玩的笨蛋：

https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview

一切正常，除非您手动更改 url bar 中的 id 参数，因为项目下拉菜单不会将新的 projectId 显示为当前项目。当用户将 url 保存为收藏链接并将其复制/粘贴到 url 栏中时，就会发生这种情况！我会说一个常见的情况！

为了解决这个问题，我可以监听 route.params 中的更改，TestsListComponent并添加一个检查sharedService/EventEmitter更改的 id 是否存在于该下拉列表中。TestsListComponent 中的布尔返回值 existsProjectId 决定我是否应该重定向到/projects页面，因为 id 不存在。

但老实说，TestsListComponent至少从用户体验的角度来看，从 重定向为时已晚，因为route projects/:id/tests已经激活。

你将如何纠正这种不当行为？

附言

• 也许有一种全局参数更改我可以收听并检查 ProjectsListComponent 中的路径及其 ID，这会有所帮助！

• 如果有人知道如何在窗口模式下编辑 plunkr 的 url 栏以测试不一致，请告诉我你是如何使只读 url 栏可编辑的......即使将 url 复制到新选项卡中也不起作用，因为我得到了plunkr 未找到错误... => ANSWER

  1. 加载 plunkr 并激活窗口模式
  2. 在窗口模式下，将 url 复制/粘贴到新选项卡中
  3. 当这是粘贴的网址时：https ://run.plnkr.co/LhwcQjzWHsRUda8H/projects/1/schoolclasses
  4. 让它成为那个网址： https ://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/1/schoolclasses
  5. 并更改参数： https ://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/2/schoolclasses
  6. 如果你不添加哈希，那么你会得到一个未找到的 404。

在这个场景中，我有一个包含 3 条路由的主页（每个懒加载主页的子页面）。

这里的辅助组件有一个主要出口和其他辅助作为

这就是我的 mainpage.route 文件的外观

现在我的辅助路由完美加载，我能够在主插座中路由有任何问题。但是，一旦我尝试像这样在辅助插座中加载路线

并尝试使用

（辅助路线有一个孩子作为自己的，我试图加载另一条路线作为同一个辅助的另一个孩子）我得到错误：

由于我无法看到任何有关如何加载和路由辅助路由的文档，因此我不知道如何进行延迟加载，最终找出了如何使这项工作。

我到底哪里错了？

这是我的项目结构

每次单击链接并加载新组件时，都会引发以下错误。

该区域显示的 responsive-height.component.ts:111 行是错误的，那里没有 http 连接。

在以前的 Angular 版本中，这只发生在构建文件中，而不是在开发环境中，但在 2.2 之前，它也发生在开发模式下。

我不知道问题是否与 angular2-router 或 angular-cli 有关。

目前我使用 angular 2.3.1 和 angular-cli@1.0.0-beta.26。

任何想法？

更新： 我的路线在那里，我删除了中间几个相同的，并通过foo bar更改了一些域名。

更新 2： 应用程序正常工作，没有奇怪的行为。但是抛出了这个错误，我想修复它。

更新 3：

应用程序模块：

我的代码就是这样，但不起作用。我想在路由加载之前检查用户信息。

我使用@angular/router:3.4.2

解析器类：

路由器：

安全组件：