问题标签 [angular2-router]

我正在尝试从 JSON 文件加载路由，因为我不想对它们进行硬编码并懒惰地加载路由。像这样的东西：

我正在使用注入到组件中的服务读取 JSON 文件。如何在路由器中注入服务以获取值？或者有没有其他更好的方法可以从 JSON 加载路由？

我的组件模板 url 指向生成响应 html 的服务器，当出现问题时，它可能会返回不同的 http 错误状态代码（401、403 等）。如果在加载路线时发生错误，我想获得错误状态。使用 router.events.subscribe 并检查 NavigationError 不会仅提供一些文本的 http 错误状态 - “无法加载 url/to/my/template”。知道如何获取响应 http 状态码吗？

我有一个Angular 2项目，我想做以下事情：

假设我有一个Component支持分页和排序的数据表。我想要实现的是，每次表格页面/大小和排序发生变化时，也要更改URL Parameters.

但是，当我从访问特定组件时，Router我还想在上设置默认 URL 参数，Address Bar 所以我想到的顺序如下：

1. 不带参数导航到我的组件
2. 设置查询参数Observable，NgOnInit并在收到第一个参数后重新加载 url 以设置默认参数
3. 每次参数更改时导航到当前路线。这将更改参数，因此查询参数Observable将发出事件。Ajax然后将触发一个新的呼叫。

现在这可能不是最好的主意，但我遇到的问题如下： 1. 第一次Ajax触发两个呼叫 2. 如果我点击页面上的“当前路线”链接NgOnInit不会触发，所以我无法替换地址栏默认参数。

代码的简短版本如下（我故意省略了导入/@Component 注释等）：

我一直在尝试学习 angular 2 以及本教程[Build an application with Angular 2 and Firebase][1]并尝试对其进行扩展。但是我在尝试嵌套多条路线时遇到了障碍。

应用结构：

路由器设置：

问题

如果我单击实验列表中的实验 1，我得到goals/1/experiments/1/notes的 url 是正确的，并且我看到了正确的实验 1 的注释。

如果我然后单击实验列表中的实验 2goals/1/experiments/2/notes ，则 url 是正确的，实验详细信息是正确的，但注释仍然是实验 1 的注释。

如果我然后刷新浏览器，将加载实验 2，并且注释现在是实验 2 的注释，这是正确的。

这就是我获取experimentId笔记的方式

实验笔记.component.ts

我确信这是我正在犯的一个明显的错误，但对于我的生活，我看不出我在哪里出错了。

我正在使用 angular-cli 构建一个 angularfire2 应用程序。

我遇到了一个问题，在初始子子路由加载时，angularfire2 在控制台中引发错误：

error_handler.js:47 例外：未捕获（承诺）：TypeError：无法读取未定义的属性“订阅”

当我的页面“刷新”时会发生这种情况。如果我离开组件并在刷新后返回它，数据加载得很好，我没有收到错误。我不确定这是否是 Angular2、AngularFire2 的错误，或者我做错了什么。有人遇到过这个问题吗？这是我的相关组件代码：

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

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

第二种方式

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

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

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

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

我有一个带有 typescript 和 systemjs 的 Angular 两个应用程序。

我的应用程序只有 800kb，并且需要 4 秒才能长出一个只有文本的页面。

我所有的 js 和 css 都很小/缩小，我总共有 11 个请求，几乎没有任何图像

所有图像都经过压缩并在 cdn firebase 中。

我使用 firebase 托管并使用 cloudflare 来实现 ssl 和性能。

有没有人在加载和缓存方面经历过糟糕的 angular2 性能。

我在速度方面也没有得到任何缓存改进。

以下是文件和加载时间的屏幕截图：

这是速度测试结果：https ://www.webpagetest.org/result/161205_0H_S4H/

加载请求：17（请参阅下面的加载网络选项卡的屏幕截图）

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

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

我正在尝试在新的 Angular2 应用程序中实现过滤机制，这将允许我过滤数组中的条目列表。这些条目可能有大约 20 个可以过滤的属性。到目前为止，我已经在一个组件中创建了一个过滤器列表，然后在一个子组件中创建了一个路由到的列表组件。然后我计划通过路由器将过滤器作为 queryParams 传递。从一个过滤器开始，这很好：

在发送端，我有：

在接收端，我有：

然后我将 myFilter 传递给过滤器管道以进行匹配和过滤。到目前为止一切正常。

但是，我不知道如何扩展它以允许多个潜在的参数，其中大部分是空白/不需要的。

我可以想象我需要通过 queryParam 定义一个包含所有活动过滤器的数组，但我能找到的唯一文档只显示了仅传递一个参数的示例。我试过玩：

但是，如果我在键：值对之外放入任何内容，我的 IDE 会注册一个错误。

我可能每次只添加所有可能的过滤器及其值，但这会每次创建一个愚蠢的 URL 字符串，其中大多数值是空白或全部等，不是很漂亮。

所以我认为我的工作流程应该是在发送端我维护一个包含所有过滤器及其状态的数组，然后每次单击一个过滤器按钮时，我首先更新数组中的相关值，然后传递整个数组通过查询参数。

在接收端，我必须以某种方式接收和处理 Param 作为数组，然后将每个条目提取为变量，然后在过滤器中处理。我也想干，所以真的不希望接收端的几个语句有效地为不同的属性做同样的事情，简单地说，循环遍历一个数组更有意义。

我希望这是有道理的，如果有人有建议，我将不胜感激，即使这意味着以不同的方式传递数据。例如，我现在正在寻找是否可以通过创建单独的过滤器服务并使用 @Input 传递数据来传递数据。

感激地收到任何想法（自学成才的业余爱好者，所以可能遗漏了一些明显的东西！）

谢谢

托尼

我想根据路由器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，越来越深。但是我必须解析这些变量、正则表达式等。必须有一种更简单的方法，因为角度路由器也必须在内部完成所有这些事情。

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