问题标签 [angular-router]

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

angular - 角度路由器中的自定义后退动画

我的问题是我有几个使用 routerTransition 的页面,因为它可以在多个地方找到(使用query(...)方法)。问题是当我的组件在浏览器的后退按钮按下时离开或进入时,我希望有不同的动画。更加具体:

  • 在常规导航中,我的组件应该从右到左进入
  • 在向后导航时,我的组件应该从左到右进入

反之亦然。

如果我能以某种方式在路由器事件中检测到它是向前导航还是向后导航,那么我可以轻松地做到这一点,但如果不向我的路线添加更多数据,我无法找到如何检测这一点。

编辑:

我试图做类似@Vega 提到的事情,我粘贴了一个关于它的片段。

模板:

代码:

这里的想法是我将转换触发器设置为forward向前backward导航和向后导航时。但是,因为(我认为至少这是原因)向后设置基本上“来自” ng-location 服务,所以状态将在路由器开始导航之前设置,并且不会有任何动画,因为触发器是在路由器插座连接或分离组件之前触发。

如您所见,我正在使用ngrx,但我认为这并不重要。这两种类型基本上只是两个 Observable。其中一个如果在按下后退按钮时触发,就像@Vega 说的那样,另一个我用自定义路由器触发(现在),我覆盖了 navigateByUrl 方法,在其中我只是调度一个 Forward 动作,然后调用超级。

我没有提到的是我不想把动画放到我加载的组件中,因为所有的动画都是一样的。如果我把它做成一个“默认”动画,那么我就不必害怕忘记放在一些组件上。

0 投票
0 回答
561 浏览

angular - 具有命名出口和基本路径的 RouterLink

我的应用程序路由存在问题:

我有一个基地和 2 和

我的路线目前是

我想去

我试过这个,但我想不通:

我什至找不到正确的网址,因为有一个空的(基地:'/')路线

我不断收到此错误:

NavigationError {id: 2, url: "/(seetickets://content:search)", 错误:错误:无法匹配任何路线。网址段:''

0 投票
0 回答
407 浏览

angular - angular4子解析器不等待父解析器

我在 angular 4 ( v 4.2.6 ) 上的解析器有问题

我有一个深层的路线结构,例如:

主线:

OrganizarionModule 路线

产品模块路线:

我需要 ProductsResolve (最后一级孩子)等到 OragnizationResolve 完成。

OrganizationResolve 为我提供了一个令牌,可帮助我获得可用于该组织的产品。在其他请求开始之前,还有其他方法可以运行该解析器吗?

谢谢

0 投票
2 回答
2022 浏览

angular - Angular 4路由器:显示没有重定向的视图

在带有 UI-Router 的 AngularJs 中,我可以执行以下操作以使任何未经授权或不存在的状态显示在特定视图中,而无需重定向,因此用户可以知道哪个路由/url 是不成功的:

现在我正在使用内置的 RouteModule 开发 Angular 4。有没有办法在不将用户重定向到完全不同的路线的情况下完成同样的事情?

0 投票
1 回答
126 浏览

angular - 带有嵌套组件的Angular 4路由

我想要这样的路由:root root/childA root/childB root/childC

根是一个仪表板组件,它具有指向子级的链接,但单击它们后,仪表板不会保留,它只会被子级替换。这将是一个具有后退按钮和面包屑的移动友好用户界面。实现这一目标的最佳方法是什么?

0 投票
1 回答
600 浏览

angular - 访问 *ngIf 内部的 url 路径

我需要在*ngIf. 我尝试了以下方法:

在我的 HTML/Pug 中:

当我使用 angular cli 构建它时它确实有效,但是当我尝试使用 aot 构建它时,我收到以下错误:Property 'value' does not exist on type 'Observable<UrlSegment[]>'

好像我不允许直接访问内部可观察对象的值*ngIf

0 投票
1 回答
1825 浏览

javascript - 守卫中不可用的路由参数

为什么id在下面的守卫中不可用?

在组件内部实现时,相同的代码可以完美运行。

0 投票
0 回答
587 浏览

angular - 为什么我在 Jest 测试运行中收到有关缺少提供程序的错误?

为什么在将 RouterEffects 添加到应用程序后运行 Jest 时出现此错误?

错误输出(部分):没有路由器提供程序!。此处提供完整输出:gist with error output

这是我开始收到此错误之后的最后一次提交:更改什么破坏我的测试。这是我添加的效果文件:效果文件

是的,我在那里注入路由器。但是为什么我会出错?我在 CoreModule 中有 RouterModule。我测试了 DiaryModule 中的一个组件。这是我配置测试模块的方式:

那为什么我会出错?RouterModule 必须包含在此:TestingModule -> DiaryModule -> CoreModule -> RouterModule。根据规范(https://angular.io/api/router/Router),路由器是 RouterModule 的一部分。那么为什么我会收到这个错误?即使我导入 RouterModule 我也有同样的错误:没有路由器的提供者!。为什么?我该如何解决这个问题?

我尝试了另一种设置。我试过这个模块配置:

看看第一个配置比第二个更好。第二个正在工作,我没有得到与第一个配置相同的错误。为什么?我有模块,我想测试该模块中的组件。我想要的只是导入包含组件的模块。

0 投票
4 回答
42948 浏览

angular - 在 Angular 4 中使用 ID 进行路由

我在 Angular 4 中的路由需要帮助。我想显示这样的 URL。本地主机:4200/user/1 如果我单击第一个用户的查看详细信息。我对如何做到这一点有点困惑。我在下面的代码中尽了最大努力,但它仍然不起作用。

应用程序路由.module.ts

0 投票
2 回答
3740 浏览

angular - lazy-loaded child route loads twice in Angular

I am confronted with the following issue: the personal section which is protected via an AuthGuard Service is loaded twice when I navigate to it or by browser refresh. Second time it strips away the query parameters of the URL if I provide any. Here is my app router configuration:

and the child router configuration

The AuthGuard Service (whereby if it only returns true is the same behaviour):

And the Navbar template:

The project is available on Github and the faulty behaviour can be tested at https://www.codingmarks.org/personal by logging in with username/pwd - test@codingmarks.org/Test_user1$

UPDATE Even if I remove PersonalBookmarksComponent and move AuthGuard to the PersonalBookmarks module the wrong behaviour still persist... The routes for PersonalBookmarksModule look something like the following:

UPDATE2: The stripping away of the query parameters was due to the redirection forced when logging in with Keycloak.

False:

Correct: