问题标签 [angular2-router3]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
554 浏览

javascript - 在 angular2 rc4 问题(纯 JS)中找不到 RouteConfig 函数

升级到 RC4 后,我在配置路由器时遇到了这个问题:

ng.router.RouteConfig 不是函数

我正在使用纯 JavaScript。

这就是我引导的方式:

我的主要组件看起来像这样(删除了不必要的代码):

我正在使用:角度:2.0.0-rc.4 路由器:3.0.0-beta.1

这是我的脚本包括:

0 投票
3 回答
259 浏览

javascript - Angular 2 路由 - 路由器 RC3

在获得我可以得到的 id 后,我正在尝试使用 routerLink 导航到页面。

问题是链接显示为“/page;id=10/component”。我希望它显示为 '/page/10/component' (不是矩阵表示法 - 没有 ';id=' )

在我的 app.routes.ts 中:

在我的页面中:

我正在使用最新的 Angular 2 路由器组件(RC3 Beta 2)。

有人知道我在做什么错吗?提前致谢。

0 投票
0 回答
435 浏览

angular - Including causes app to hang on refresh

Reference: https://angular.io/docs/ts/latest/guide/router.html

My app builds and loads fine. When I hit F5 in any browser the app hangs: It displays "loading..." in the browser and no error message appears in the console.

By elimination I discovered that router-outlet in app.html appears to cause the problem. When I comment out router-outlet the app reloads correctly. Note that removing LocationStrategy in main.ts has no effect. What am I missing?

main.ts

app.component.ts

app.html

package.json

0 投票
1 回答
940 浏览

angular - Angular RC4,“App”的一个或多个提供者未定义:[?]

将我的应用程序更新到 angular2 到 RC4 后,我收到了这个错误。我已经LoginService 注入AppComponent 了新的webpack 启动包。

我试图AppComponent在路线中加入,但它不起作用。我也在LoginServiceindex.ts 中包含了 APP_PROVIDERS 但我遇到了另一个错误

无效的提供者 - 只允许提供者和类型的实例,得到:未定义

也放入LoginService引导程序,但没有效果。

RC4 中的 Angular2 有什么问题?组件不再在树中?

这是我的路由器“3.0.0-beta.2”路由器配置:

而且我想为每条路线提供 LoginService 。

我的 app.component 看起来像这样:

提供者不适用于路由器...现在...在 rc4 中

登录服务:

0 投票
3 回答
6481 浏览

angular - 在 canDeactivate 中返回 Observable 不起作用

我有一个确认/取消模式对话框,当用户离开路线时会弹出。我通过使用带有 canDeactivate 方法的守卫来做到这一点。但是,我希望 canDeactivate 等到它从模式中获得响应,然后再返回任何内容。

我试图通过返回一个 observable 来做到这一点,但它不起作用。

当我在 if 块中执行 console.log 时,即使我可以看到 observable 工作正常,当我单击确认时也没有发生任何事情

这是表单服务的外观。

0 投票
1 回答
170 浏览

angular - 对于 Angular2 Router3,为什么每次我在其子路由之间切换时都不会调用我的父路由的 Guard?

我的父路由有一个 Guard,在查看子路由时并不总是调用它。它在加载第一个孩子时被调用,但如果我切换到同一个父级中的另一个孩子,则不会再次引用父级的 Guard。这是我所拥有的:

有没有办法确保每次在 child1 和 child2 之间切换时都会调用 LoggedInGuard?

0 投票
1 回答
1763 浏览

angular - 如何在angular2 router3中为子路由指定辅助组件

我正在使用新的 route3,并且想知道为子路由指定辅助组件的 URL 语法是什么。

我有以下子路由定义:

ComponentC 的模板就像

URL /component-c/c1显示 ComponentC1;但是,我尝试了许多组合,例如/component-c(aux:auxPath)/c1/component-c/c1(aux:auxPath)等,但仍然无法弄清楚如何显示 ComponentAux。 ..

0 投票
0 回答
947 浏览

angular - 可选的路由参数,而不是查询参数(@angular/router 3)

通常,在项目中,某些路线是必需的,而不是开发人员的选择。也就是说,我也同意这些路由,但会损害查询参数(php 或其他服务器端语言中所谓的 GET 变量)。

这里有一个类似的问题,但它是一个比这个更简单的场景,它没有提到任何关于解决“可选”路由参数顺序的内容。当我们需要一个或两个以上的“可选”路由参数时,它也不会处理这种情况(例如当您过滤各种内容的内容时)。它只有一个“可选”路由参数。我一直使用引号,因为据我所知,默认情况下没有“可选路由参数”之类的东西,只要实现这一点的唯一方法是伪造它(如声明所有可能的路由,使用和没有那个参数)。

例如,根据项目要求,路线需要如下所示

不喜欢这样

好的,OR上面的路由示例是我自己的,不是必需的。因为,即使在这种情况下并非如此(我们不希望谷歌或其他搜索引擎有任何机会在不同的路线上看到相同的内容),但在其他情况下,顺序仍然无关紧要。而且,在这些情况下,开发人员更容易在生成路由链接时根本不关心他/她堆叠过滤器的顺序。通过“过滤器”,我指的是一个细分组,例如/categories/:categories.

撇开OR不谈,至少其余的都是一个非常常见的情况,事实上,我参与的所有项目都有这样的过滤/排序路线,而不是查询参数。

那么,对于 Angular 的路由器有这个限制,人们将如何处理所需的路由呢?

当然,在我的脑海中,我会考虑这种设置:

或者也许使用子路由,将它们定义在一个单独的文件中,这样我们就不会在一个地方用这么多配置来混淆主应用程序路由。

所以上面的路由配置有明显的局限性:

  1. 在上面的示例中,我们最多只应用了 2 个过滤器(categoriestags)。如果我们有 4 或 5 个过滤器,这将太麻烦了。例如,如果有 5 个过滤器,我们需要定义路由以组合任何 1 个过滤器、任何 2 个过滤器、任何 3 个过滤器、任何 4 个过滤器和所有 5 个过滤器。还要添加分页......这将是路由配置的地狱。我的意思是,对于上述每条路线,添加我们可能有也可能没有的事实/page/:page(我们不希望/page/1在 url 中,我们只想/page在从第 2 页开始的 url 中)。这只是将上述所有路线翻了一番。维护此路由配置本身已成为一个单独的项目。
  2. 按照上面的路由配置,我们只能在url中按照一定的顺序堆叠segments:先是category,再是tags。当然,我们可以通过在路由配置中设置所有可能的组合(同时具有/categories/:categories/tags/:tags/tags/:tags/categories/:categories)来解决这个问题,当我们有超过 2 个过滤器时,这将是一个痛苦的配置。维护起来太复杂了。/categories/cat1_cat2如果路由器能够简单地识别该段组在 url 中其他段/段组中的位置,那将更有用。当然,这意味着配置看起来会与现在不同,因为我们还可以在 url 中有“单个”段,而不仅仅是成对的。但这是他们早在开始开发路由器之前就应该考虑的事情。

我不敢相信,在构建角度路由器时,他们没有考虑这种(非常常见的)场景并提供某种帮助来实现这种定制。有什么我想念的吗?路由器实际上是否提供了一种自定义此类内容的方法,但在我碰巧看到的任何教程中都没有人参与其中?

0 投票
2 回答
136 浏览

javascript - What are Router Bindings actually used for

What are Router Bindings actually used for in Angular2 router. specially the Router 3.0 (newest Angular RC4 router)? Any working code or plunker?

https://angular.io/docs/ts/latest/api/router-deprecated/index/ROUTER_BINDINGS-let.html

0 投票
2 回答
606 浏览

angular - 创建带有可选子级的路由

是否可以使用 配置“终端”路由children,或者换句话说,使用“可选”配置路由children

我正在尝试创建一个可路由的主/详细视图,其中最初不显示详细信息,并且在打开详细信息视图时列表不会被破坏。

例如,导航到/a,然后在不破坏的情况下a导航到/a/1

第一次尝试

...使用此配置,将引发以下错误:

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'a'

第二次尝试

...列表组件被销毁并重新创建,即如果它有用户输入,则值消失了。

第三次尝试- 创建一个“空”组件并默认加载它。

...有效,但感觉像是一种解决方法。

有没有更好的办法?