问题标签 [angular-activatedroute]

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 回答
333 浏览

angular - 使用 Angular 中的参数模拟激活的路由

问题

如何ActivatedRoutes在我的单元测试中模拟?

服务:

我的单元测试:

带模拟课

...

我试过差异。方法来自:

Angular2 RC5 模拟激活路由参数

Angular2如何模拟订阅的激活路由参数

单元测试角度正确激活路线

Angular 4 - 失败:无法解析 ActivatedRoute 的所有参数:(?, ?, ?, ?, ?, ?, ?, ?)

但我没有得到任何地方。

呃:

0 投票
2 回答
1965 浏览

angular - ActivatedRoute.snapshot.paramMap 不工作

我试图在启动/初始路由上获取路由参数。但它不起作用。

app.component.ts

app.module.ts(包括的不仅仅是这个)

然后我提供我的应用程序并转到:

http://localhost:4200/123

但我的 app.component.ts 只是 console.log 的null null。为什么这不起作用?我觉得我的一切都是正确的。这是一个可以使用的 Angular Blitz:https ://stackblitz.com/edit/angular-wnrrkd

0 投票
2 回答
6052 浏览

angular - 如何在Angular程序中将未知路由重定向到主路由?

我有一个routes.ts如下文件:

和这样的auth-guard.service.ts文件:

它适用于已知路线,users但是当我尝试未知路线时homeee,它无法正常工作,并显示一个带有页眉和页脚且中间没有内容的页面。如何将所有未知路由重定向到主组件?

我也想知道这是我喜欢做的事情的好方法吗?(我喜欢只有登录用户有权查看除主组件之外的其他组件,并且登录前的所有路由都被重定向到主组件)。

0 投票
0 回答
61 浏览

angular - Angular - 显示来自子组件内的导入组件的激活路由数据

下面是我的模块结构:

组件二是显示专辑列表


专辑列表组件

我有一个组件,它获取路由参数以传递给服务以返回查询。

服务

专辑列表组件中的函数在服务中调用此查询并返回结果。

以上所有工作正常,我的组件可以正确显示专辑列表并且parent_id输出更新正常。

当我有另一个组件(组件 2 编辑)也需要显示专辑列表组件时,现在真正的问题出现了。该组件是另一个组件的子组件。

组件 2 父模块

组件 2 - Edit.html

在这个嵌套点,组件 2 根本不显示任何专辑,我相信这是因为params.parentID未定义,因此无法正确查询数据库并返回任何内容。正如您在上面看到的,我尝试将 parentID 发送到输出中。但我认为这是由于组件 2 的定位导致激活的路线不一样。

任何想法如何list-component在子组件中返回结果?

作为测试,我将相册查询修改为如下:

this.albums$ = this._activatedRoute.parent.parent.params.pipe(果然,专辑显示在组件 2 中。但是,没有可行的解决方案允许专辑列表组件在应用程序的任何地方可重用。

0 投票
1 回答
166 浏览

angular - Angular RouterLink 参数 - 激活的路由不起作用

我正在尝试使用 ActivatedRoute 获取 routerLink 参数。

它仅第一次显示参数。但在更改参数时不会再次出现。

链接到StackBlitz示例。

当我单击Search Page a它显示标题是test。但是,当我单击Search Page b时,即使标题正在测试,它仍然会继续显示 title is test。但是,当我单击Home然后Search Page b它显示更新的参数为testing

如何解决此问题,以便在搜索页面 a 之后单击搜索页面b时,它会显示更新的参数。

0 投票
3 回答
52 浏览

angular - 如何将参数从 urlA 传递到 urlB 而不在 url 中显示它们

我需要从 URLA o urlB 传递参数,并且 urlB 必须显示(所以我不能使用skiplocation=true)。

在我的 ts 中(在 URLA 中):

当我接受参数时,我会这样做:

问题是它以这种方式向我显示 urlURLB?name=erika而我不想这样做,但我希望它向我显示URLB并且我可以接受参数。任何人都可以帮助我吗?

0 投票
1 回答
39 浏览

angular - 角度订阅两个级别的激活路线

以下是我的查询,它仅使用以下参数从参数中生成艺术家 ID:

this._subscription = this._activatedRoute.params.pipe(

但是,如果我使用:

this._subscription = this._activatedRoute.parent.parent.params.pipe(,然后我得到专辑 ID,但没有艺术家 ID。

我需要两个查询,如this.service.getArtist(params.albumID, params.ArtistID);

获取 url 参数的两个级别以合并到我的查询中的最佳解决方案是什么?

可能是父组件需要执行自己的查询来获取albumID并在服务中提供给子组件使用的情况吗?

应用程序路由模块

这是在主路由模块中并导入一个相册模块。相册模块有它自己的儿童路由器插座。

相册登陆模块

这是为艺术家导入子模块的专辑登陆模块。

0 投票
1 回答
405 浏览

angular - 在父页面与子组件之间传递参数

我在使用 Angular 9 中的路由机制时遇到了困难。我有一个 Buildings 组件和一个 BuildingDetailComponent。我无法在 BuildingDetailCompoent 中获取参数。即使它出现在地址栏中的 URL 中,它也不在那里。

所以在父组件中我只有这个..

然后在路由的建筑细节组件中我有这个。

所以基本上我在我的 BuildingComponent.html 中像这样传递值......

然后在 BuildingDetailComponent 中,我使用以下命令收集值...

我已经尝试了很多路由,最后这是我现在需要的唯一部分 this.building.ID 是未定义的,所以当我查看 this.route 时,即使在地址栏中可以看到传递的值,也没有参数。

我可以通过执行以下操作来解决它,并且可能会用它做一些事情,但感觉不对。

我希望作为最后的途径,有人可以就此向我提供建议。

谢谢。

0 投票
1 回答
300 浏览

javascript - 使用 ActivatedRouteSnapshot 和 Observables 解决数据问题

我在 Angular 2 中遇到了 observables 的问题。我可以使用服务从数据库中检索数据,并且可以 console.log 在我的服务和解析器文件中记录数据,但我无法将数据传递到我的组件中。

我正在使用服务来查询数据库:

我的组件有以下代码,但我无法从服务/解析器中检索数据:

如何让我的组件访问解析的数据?任何建议将不胜感激。

0 投票
0 回答
189 浏览

javascript - 单元测试 ActivatedRoute queryParams 在销毁组件时取消订阅

我正在尝试测试此组件的 ngOnDestroy() 方法,但无法找到正确的方法。正确的方法应该是什么?