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

angular - 如果父组件的路径为空,Angular 2 命名路由器将不起作用

这是我的路线配置

这非常适用于:

但是如果我的父路径是这样的空白:

以下均无效:

错误:错误:无法匹配任何路由。URL 段:'查询'

我需要这个路由器配置,因为我的嵌套命名出口位于主页组件中,我不想在它前面加上 /home 只是为了让它工作

非常感谢任何帮助。


这是我上面的代码的 plunker,它正在工作

https://plnkr.co/edit/SZhu8LxHiSKNxX3JQ22N

而且我不知道为什么下面的一个不起作用

https://plnkr.co/edit/jvhkN77wH6ZePERwDvT3

0 投票
2 回答
2967 浏览

angular - Angular 4 按钮链接到 LazyLoading 模块路由不起作用

我有一个带有指向延迟加载模块的 routerLink 指令的按钮。但是链接不起作用。当它加载到浏览器地址栏中(单击按钮时)时,组件永远不会被加载,并且在控制台中我收到 404 错误。我究竟做错了什么。

我想要实现的功能是:当我去 /incidents/5 获取一个填写好的表格(来自 id = 5 的事件用于编辑/更新),而当我去 /incidents/new 获取一个空表格来插入一个新事件。

我想问题可能出在 IncidentsRou​​tingModule 但我无法工作。

我的主要应用程序路由模块如下:

IncidentsModule 是:

IncidentsRou​​tingModule 是:

我的 IncidentsComponent 有一个带有 routerLink 指令的按钮,该指令不起作用。贝娄是我的 IncidentsComponent:

0 投票
1 回答
32 浏览

angular - 修改组件层次结构时面临路由器错误

用例有点复杂,我不得不求助于Plunker 来演示这个问题

整个想法是根据窗口的大小实时更改页面的设计。在给定的链接中,如果窗口小于 600 像素,则父模板显示一个 2 列表,当它超过 600 像素时,它显示一个 3 列表中的内容(只是一个示例)。

复制问题的步骤(您也可以在 Plunker 页面中找到它们):

  1. 打开你的开发者工具
  2. 点击“打开中间孩子”
  3. 点击“打开孙子”
  4. 点击“打开中间孩子”
  5. 调整预览窗口的大小,如果它小于 600 像素,则将其放大。否则,使其小于 600px(只需更改状态)
  6. 点击“打开孙子”

错误是:

  • 在第 5 步之后,不应显示“孙子”
  • 执行步骤 6 将导致您可以在控制台中看到的错误

我相信问题取决于这样一个事实,即有多个,<router-outlet>并且 Angular 不支持在它们之间切换。我只是希望有办法解决这个问题!

这是app.ts遵守 SO 的代码:

0 投票
1 回答
423 浏览

server - Angular Dart - 如何为 Angular Dart 应用程序创建代理服务器?

我想为我的 angular-dart 应用程序创建一个代理服务器,index.html每当我刷新浏览器并且路由与 root 不同时,它都会将我重定向到。例如,如果 url 是:http://localhost:8080/users并且我点击了刷新按钮,我想被重定向到http://localhost:8080or http://localhost:8080/index.html

此外,能够连接到第三方服务器应用程序将非常有用。换句话说,我想运行pub serve和运行第三方服务器(python、php 或 java)localhost:9000

0 投票
2 回答
28 浏览

angular - 在 Angular 中处理大量可选参数的最佳方法

我有一个 Angular 4 组件,它根据用户选择的过滤器选项显示数据。我想将过滤器选项保存为 url 中的参数,类似于 kibana。

我想知道处理所有这些可选参数的最佳方法是什么。我在示例中拥有的 6 个过滤器选项远不止这些,它使代码有点笨拙。

目前我正在订阅 route.params 并使用 if 语句搜索每一个。要创建和导航我订阅事件发射器的 url,检查自定义参数类的值。这是它的外观示例

0 投票
6 回答
382577 浏览

angular - Send data through routing paths in Angular

Is there anyway to send data as parameter with router.navigate? I mean, something like this example, as you can see the route has a data parameter, but doing this it's not working:

because some-data is not a valid parameter. How can I do that? I don't want to send the parameter with queryParams.

0 投票
3 回答
11072 浏览

angular - Angular 子模块的自定义 RouteReuseStrategy

我只想对一个模块使用这种自定义路由重用策略:

所以我在我的一个名为的模块中传递了@NgModule() ChildModule

不幸的是,当我将它传递到那里时,它就会被忽略。虽然添加到我的根目录时工作正常AppModule......我不确定它是否重要,但ChildModule被懒惰地加载。如何解决?

0 投票
5 回答
19617 浏览

angular - Angular路由器:如何将数据传递给延迟加载模块?

我的 Angular 应用程序模块有以下路由路径:

如您所见,我使用data属性将一些数据传递给“文档”中的每个路径,因此我可以从路由路径中声明的任何组件中获取它:

例如,这是我获取数据的方式DocumentDetailsComponent

现在我改变了整个应用程序的路由结构,并从其他模块中调用上述模块,在延迟加载中,使用loadChildren属性。我以同样的方式传递数据:

根据我的需要,我对所有其他调用DocumentsManagementRoutingModule、将myObject属性更改为 等的模块都做了同样的事情。MyConstants.OPTION_TWOMyConstants.OPTION_THREE

那么,由于我不知道调用我的延迟加载模块的模块及其相关路径,如何data从调用者模块获取属性?

0 投票
0 回答
41 浏览

angular - 在 angular4 应用程序中,如何从插座内更改具有路由器插座的组件中的数据?

我在开发 angular2-4 应用程序时多次遇到这种情况。我仍然不知道解决这种情况的最佳方法。情况是这样的:

像 app.component.ts 这样的组件有一个标头。此标头需要对在路由器插座中生成的组件内发生的用户输入做出反应。根据我的经验,使用事件发射器将数据发送到路由器插座之外是行不通的。我一直在做的是将 AppComponent 标记为@Injectable()。然后我可以通过将 app.component 注入任何需要访问它的组件来访问方法和数据。这似乎不是正确的方法。这个问题有更好的解决方案吗?

这是我所说的 app.component.html 的一个例子

app.component.ts

登录服务

在此示例中,我将 loginService 注入到正在路由到的组件中,然后在该注入 appComponent 中以显示用户已登录,以便我可以显示菜单图标,该图标仅对已登录的用户可见在。

这只是感觉不对。有一个更好的方法吗?谢谢你的帮助!

0 投票
0 回答
216 浏览

angular - 从浏览器历史记录中删除 Angular 二级出口路由

我使用以下代码(与https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets中的示例完全相同)在用户单击标题中的帐户时显示弹出菜单:

<a role="button" [routerLink]="[{outlets: {popup: ['account']}}]"></a>

我的问题是每次点击都会将该项目添加到浏览器历史记录中,一次显示一次隐藏。我尝试使用{skipLocationChange: true},但由于某种原因,这会导致浏览器完全刷新。