问题标签 [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 回答
5273 浏览

angular - TypeError:无法读取空 Angular2 路由器的属性“路由器”

下面是我的组件。错误点是this.router.navigate()部分。登录后,我想将用户重定向到不同的页面,类似于$state.go('dashboard').

我不断收到这个错误。请赐教,我做错了什么?

在此处输入图像描述

0 投票
1 回答
317 浏览

angular - Angular 2.0.1:简化复杂的导航组件

您如何保持导航组件与非平凡应用程序同步?例如,在Angular 2 的简单 Tour of Heroes 应用程序中,app.component.ts具有静态(即不变)声明式导航:

但在更复杂的应用程序中,导航组件通常是动态的。在我的例子中,它nav有一个sidenav、一个后退按钮、特定于组件的操作和用户信息;并且,sidenav操作会根据用户的角色而变化。这是一个相当典型的场景——想想 Google Gmail、收件箱、日历、文档等。

现在,我nav在一个单独的my-header组件中实现了*ngIf对当前组件和用户角色的大量测试——这是一场丑陋的噩梦:

my-header组件简单地包含在app.component.html

但是my-header组件和my-footer组件都不在路由器树中,因此my-header注入ActivatedRoute的始终是根节点,这意味着我什至无法转换绝对后退导航:

到相对导航:

这意味着在这个组件中复制路由器树以保持同步——这显然不是正确的做法......

关于如何解决保持导航组件与复杂应用程序同步这一可能非常常见的挑战的任何想法?

0 投票
2 回答
229 浏览

angular - 如何在 Angular 2 中解析 url“localhost:3000/1234.xhtml”?

我有这种情况,链接是由后端生成的,带有 .xhtml 扩展名。用户可以访问他们提供的这个链接,我需要从 1234.xhtml 获取 1234 并用它查询数据库。获取查询参数很清楚。但是路由器不解析这个 url。它抛出错误说“无法获取/1234.xhtml”。命令式路由确实有效。所以这是一个浏览器或服务器相关的问题。如何解决这个问题?

我的路线是:

在此处输入图像描述

0 投票
2 回答
8712 浏览

angular - 想要在 Angular 2 中路由时防止组件重新创建

假设我们有两条路线DashboardProfile. Dashboard具有动态标签功能,例如Google spreadsheet. 我想做一些交互(构建图表,可视化一些数据)在Dashboard. 现在,如果我路由到Profile然后再路由回Dashboard,我想查看Dashboard. 这意味着,我想保持客户端的状态。AFAIK 在组件之间路由时,它会重新创建组件。是否可以在使用 Angular 2 路由时制作类似应用程序的电子表格?我需要使用路由,因为在我的应用程序中我必须使用 LazyLoading 功能。

那么这个想法应该是什么?我是角度 2 的新手。

0 投票
1 回答
542 浏览

angular - Angular 2 路由器评估多个路由参数

在我的应用程序中,我有多个参数的路线,例如

我如何最好地评估这些参数?我可以订阅paramsqueryParamsActivatedRoute

但是,这当然会触发两次加载。另外,我总是需要这两条信息,例如salesfrom/to来自上面的例子。

于是上面的代码就变成了

而且我还没有解决触发加载两次的问题。

更糟糕的是,我还需要弄清楚我需要升多少级ActivatedRoute,所以看到这并不罕见

啊。无论如何,对于延迟加载的组件,这都会崩溃。无论如何,为了检索少数路由参数,需要大量的样板代码。

我做错了吗?有推荐的方法吗?

0 投票
1 回答
968 浏览

angular - 如何将 routerLink queryParams 设置为属性值?

我需要通过组件属性设置[queryParams]for a routerLink,即

但是这种方法不起作用,路由没有附加查询参数。我错过了什么?

0 投票
1 回答
1510 浏览

angular - 带有ngrx的Angular 2路由器v3可观察防护

我正在尝试使用 redux(ngrx) 创建一个“身份验证应用程序”,并且我正在尝试在秘密守卫中使用我的应用程序状态。在这里你可以看到我的 github:https ://github.com/tamasfoldi/ngrx-auth/tree/router 这就是我的守卫的样子:

它返回 isLoggedIn 属性,该属性应该没问题,因为路由器解析了 Promise 和 observable,但是当我导航到秘密部分时路由器会阻止它。这是我的路线:

在 redux 中,我收到了 init 状态,所以我也尝试跳过我的 observable 中的第一个发射,但它都不起作用。这是跳过代码:

如果我使用我的 AuthService 的身份验证功能,它可以正常工作,但该解决方案不是“类似 redux”的。你能帮我解决一下如何让它与ngrx一起工作吗?或者我无法在警卫中使用我的 appstate?

0 投票
1 回答
65 浏览

angular - angular 2.0.0 成功登录后如何重定向

我需要从路由器获取上一个 URL(在重定向到登录页面之前) 路由器可以给我上一个 URL 吗?

我发现一些关于这个主题的旧帖子与新的稳定路由器 3.0.0 无关。

0 投票
1 回答
1711 浏览

javascript - 通过单击 IFrame(内联框架)中的一个项目,我需要路由到特定的 URL

嗨,我在我的 Angular 2 应用程序的一个组件中使用 i 框架。

组件.ts

组件.html

在 i 框架上触发点击事件时,我需要路由到另一个组件。(我已经在根组件的路由文件中指定了该组件)。

现在在 i 框架应用程序(一个 mvc 应用程序)中,我触发了一个点击功能

并在 Angular 2 应用程序的根文件夹中添加了 index.js(与 index.html 链接)

index.js

现在我可以通过点击 i frame 应用程序在 angular 2 应用程序页面上显示警报。

目标是更改 showme() 的功能以更改 angular 2 应用程序的路线。

我该怎么做 ?

我尝试了几种方法来解决它,不幸的是我无法得到任何方法。

0 投票
0 回答
2404 浏览

angular - 类型 XYZComponent 是两个模块的一部分,模块混淆了采取什么路线

这是场景。我有一个 UserConsoleModule 和 ShoppingCartModule。我有一个名为 MyProfileComponent 的组件。当您转到 /user-console 时,您会看到 MyProfileComponent,因此我已将其放在 UserConsoleModule 的声明中。现在在 /shopping-cart/profile 中,当用户结账时,我会显示他的个人资料以确保每个信息都正常。所以我重用并将 MyProfileComponent 放在那里,并在 ShoppingCartModule 中声明该组件。现在它说,组件是两个模块的一部分。我不知道为什么它在两个模块中会打扰。他们是独立的。无论我重用什么组件,我都会在那个特定的模块中声明它,我认为我就像 RC 5 之前的声明一样好。这个模块的东西很好,但实际上会造成很多混乱。

另一个问题是路线。我有一个 AdminConsoleModule,我在其中重用了 UserConsoleModule 和 ShoppingCartModule。我所做的是在 AdminConsoleModule 的导入中导入 ShoppingCartModule。我的 /shopping-cart 重定向到 /shopping-cart/cart。因此,一旦管理控制台加载,它就会重定向到 /admin-console/cart。虽然它应该在路由器插座中加载 UserResults。路由器很混乱。我在这里做错了吗?

作为解决方案的一部分,我制作了一个共享模块,它只包含购物车组件,其想法是在 shopping-cart.module 中导入 shared-shopping-cart.module.ts 和 shopping-cart.routing.ts。 ts,使其保持解耦。但是共享模块会抛出一个错误,说 router-outlet not known as my shopping-cart.component.ts 有 router-outlet。

我的 admin-console.routing.ts

我的管理控制台模块:

我没有导入我的个人资料和所有内容,因为 UserConsole 具有这些组件。

用户控制台模块

购物车模块

购物车.routing.ts

在 AdminConsoleModuel 的导入中,如果我将 UserConsoleModule 放在 ShoppingCartModule 之前,那么它会转到 admin-console/my-profile,因为我的 UserConsoleRouting 也有重定向。

这是用户控制台.routing.ts

我认为,最终的解决方案似乎是为每个组件制作一个模块并在任何地方导入它。:p