问题标签 [angular-router-params]

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 投票
0 回答
50 浏览

angular - 角路由导航到子路由

这就是我的 app-routing-module 中的路由的样子。

现在,当我尝试这样做时,在我的一个组件中,

它永远不会将我重定向到这条路径'slideset/:slidesetId' 我无法弄清楚为什么?或者这是导航到子组件的正确方法吗?

0 投票
1 回答
80 浏览

angular - 如何订阅子路由参数并使用结果运行另一个服务?

我正在尝试使以下情况起作用;我有一个屏幕,我们称之为它AdminComponent,它有两个侧边栏和一个router-outlet显示所选项目路线的屏幕。

我试图完成的想法如下:

left-sidebar我渲染多个链接,这些链接将路径更改为/admin/:id;我使用一个简单的get服务来获取我需要为每个项目呈现链接的数据。

right-sidebar我试图订阅路由参数时,当值发生变化时,我还可以运行不同的服务来获取特定的数据,该数据:id将包含action-itemsleft-sidebar.

最后一部分是我遇到的麻烦,因为我没有看到对参数的订阅起作用;我试过使用:

但是,当我在父路由上时,这会引发错误,例如admin/,它仅在我直接导航到时才有效admin/1。我需要订阅路线更改,以便我可以在右侧边栏上呈现项目,但我现在真的不知道如何处理它。

希望它足够清楚,任何其他可能有助于我提供的细节。

0 投票
0 回答
113 浏览

angular - 在angular 6 Home route中设置可选语言参数

我正在尝试在 url 中传递语言代码,localhost4200/en-us/并在子组件中获取语言代码,但它不起作用,当我尝试localhost4200/en-us/像这样导航时,我的应用程序开始从localhost4200/en-us/assets/img.png. 这是一个使用 Angular 制作的简单单页网站。

应用路由模块

首页路由模块

在 Index1Component 中获取路由器参数

如果我导航到localhost4200/en-us/应用程序没有按预期工作并且它开始请求资源localhost4200/en-us/assets

我还在学习 Angular 路由,我在这里做错了什么?有没有办法设置这个动态语言参数,我希望它是可选的localhost4200/,并且localhost4200/en-us.

0 投票
1 回答
257 浏览

angular - 表单提交上的Angular 8 Deeplinking

我已经阅读了几篇关于 Angular 8 中的深度链接的文章。但还没有找到更好的解决方案来解决我的问题。

问题要求: 在此处输入图像描述

请参考上面的截图。我有两个小部件Form WidgetTable Widget的简单 Angular 应用程序。表格小部件由表单小部件中执行的搜索驱动浏览器中的 url 是“localhost/dashboard/widget/actionForm”

  1. 执行表单搜索时。我希望表单数据成为 URL 的一部分,例如“localhost/dashboard/widget/actionForm;Param_A=test1;Param_B=test2”,并且表格小部件也可以动态更新

  2. 当我复制 URL“localhost/dashboard/widget/actionForm;Param_A=test1;Param_B=test2”并在新浏览器中启动它时。它应该能够使用 url 中的参数来获取表单状态。

这只是一个例证。在理想情况下,表单中会有很多参数。

注意:URL 参数也需要编码。但我想这是一个很容易解决的问题。

0 投票
1 回答
47 浏览

angular - 如何输入两个路由参数,其中一个在 URL 之间进行导航,同时使用 Angular CLI 8+ 中的子路由使用 Angular Router

我正在尝试导航到提供两个路由参数的页面,如下所示:

author/journals/:journal_Id/draftArticles/:articleId

我知道当路由参数位于路由末尾时可以给出两个参数author/journals/draftArticles/:journal_Id/:articleId, journal_Id, articleId,这可能会解决我的问题。但我想保持我正在尝试的结构。

以上是我的路线的结构。

AuthorNavComponent是我的 Sidenav,在其中我还使用另一个路由器插座来显示儿童路线。我单击的按钮位于 Sidenav 内部,它最终调用 serviceA 中的一个方法,该方法在调用服务器后将重定向到上述指定的 URL,即https://localhost:4200/author/journals/:journal_Id/draftArticles /:文章ID

如果需要更多信息,请告诉我

更新

我尝试使用中间命名的服务journalService并创建了一个BehaviorSubject<any[]>以传递导航到的路径。在路由为 的组件中author/journals/3,我订阅了它BehaviorSubject<any[]>并在更改此 BehaviorSubject 的值时进行导航,该 BehaviorSubject 沿相对 ActivatedRoute 传递,如下所示:

日记帐组件

其他组件我要更改的值BehaviorSubject<any[]>

也可以使用此生成更新 2this.router.navigate(['author/journals', journalId, 'draftArticles', articleId]);路线 ->但仍然存在以下错误:(

上述技术完美地生成了 URL。但我仍然收到以下错误:

错误

看起来,上面描述的路由有问题。

0 投票
1 回答
1384 浏览

angular - 服务中的角度路由参数

我需要在我的服务中获取路由参数

在组件中

工作正常,但在服务city中未定义

如果我在组件中提供定位服务

我的服务调用了两次(我在不同的组件中使用我的服务)

如何在我的服务中获取路由参数?


UPD:项目有两个模块!!!BasicModule 和 DashboardModule

0 投票
0 回答
392 浏览

angular - 从 canActivate 导航时的角度路由器无限循环

由于角度路由器需要静态路径,我使用 canActive 动态路由我的应用程序。

我的主要路线如下。

lang.select.module 是

使用 lang-choice.ts (我想在其中导航到 URI/en/

并以 /Login 组件结尾,因为我的 authentification.module.ts 如下。

我得到了函数“defaultLanguage”的正确结果,并希望导航到“localhost:port/auths/lan/en/login”,但似乎“authentification.module”模块没有加载,而是以无限循环结束。

知道为什么吗?

0 投票
0 回答
245 浏览

angular - 刷新页面时的角度查询参数

我有一个问题,这让我很苦恼。场景 - 页面 A 和页面 B:

  • 在页面 AI 中有一个按钮,可以导航到页面 B 添加查询参数
  • 页面 B 已正确加载。但是,如果我在浏览器中单击刷新,则会出现错误

URL 也在添加查询参数。我不愿意。

  • 我试图检查何时使用此代码重新加载页面并重新创建导航

即使尝试重新创建 url,它仍然会向我抛出错误。有办法修复它,或忽略查询参数

0 投票
0 回答
97 浏览

javascript - Angular Route 参数以匹配正则表达式模式

在我的 Angular 应用程序中,有两条路线具有相似的模式。先出现的总是匹配,并渲染相应的组件。我想匹配并渲染正确的组件,并根据正则表达式模式提取路由参数,但不知道如何实现。

客户端类型是手机或电脑,deviceUuid 是普通的uuid。

0 投票
1 回答
58 浏览

angular - Angular 9 组件中的单元测试异步代码

更新 2: 事实证明,我的新测试最有可能在首次加载时响应上一个测试的 url 参数。这显然不是我想要的,可能意味着我需要更改路由。是在 afterEach 中重置路由参数的唯一解决方案吗?有没有更好的方法来处理这个?

更新:

经过更多的挖掘,我不再认为这是一个异步问题,但我不确定问题是什么。我认为这与路由或订阅有关。这是我投入组件中的一些控制台日志中失败的测试场景的示例。

我更新了下面的代码片段以反映我添加的控制台日志。

正如您从日志中看到的那样,由于某种原因,参数订阅在第一次测试中第二次运行(第一次测试运行并正常完成,记录了“新请求”和“制作...”/“制作.. ." 消息仅一次)。我不知道是否有办法确定正在运行哪个测试组件(如果由于某种原因生成了新组件并响应先前测试中的参数)或什么。我不确定问题是什么或如何进一步调试。

原始问题

我在测试运行一些异步代码的组件时遇到问题。由于保密协议,我无法发布实际代码,但我提供了一个简单的表示,它尽可能接近我的真实代码。

我有一个像这样运行一些异步代码的组件(仅包含相关位,默认导入/设置是隐含的):

然后我有一个这样的单元测试(也是示例代码):

我遇到的问题是在我的单元测试中,来自我的组件的 await 调用在进入下一个单元测试之前尚未完成,因此我的期望调用无法正常运行。当我的测试以完美的顺序运行时,一切都很好。但有时我的测试以不同的顺序运行,比如 1、3、2。当他们这样做时,测试#2 失败,因为它期望使用 id 2 调用retrieveItem,但之前的调用使用 id 1 触发了它。(这只是一个人为的例子,我的实际代码比这更复杂)

我想知道的是,我如何告诉 jasmine 等待在我的组件中触发的调用返回。我已经尝试查看有关 jasmine 的异步代码的教程https://jasmine.github.io/tutorials/async但这些似乎都提到了从我的测试中手动进行异步调用,这不是我正在尝试的去做。

带有 tick() 的 fakeAsync 是我试图让它等待路由和一切完成,但它似乎并没有解决我的问题。有谁知道我做错了什么或如何解决我的问题?

我也试过:

  • 在刻度内放置一个值,例如刻度(10)
  • 使用fixture.whenStable().then(() => { //expect stuff})

另外,如果我添加 routeParams.next({}); 对我的 afterEach() 来说,它解决了这个问题,但我觉得这违背了测试随机顺序的目的,因为这意味着我的代码只有在你没有来自任何参数的情况下才会起作用,在我的实际实现中你可以在这里使用您的网址中的任何各种参数(例如,我可以从 pageId: 1 转到 id: 2 而没有中间步骤)。

更多信息:在我的真实代码中,它是这样发生的:

我的测试是检查在 activateRoute 传递了各种参数时是否调用了 function1、function2 和 function3。我在我的组件中添加了控制台日志,以确认 test2 将启动,并且在 test2 启动后调用来自 test1 的 function2。因此,我确保未调用 function2 的检查失败,因为它从 test1 延迟。

非常感谢任何建议或提示。