问题标签 [angular4-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 投票
1 回答
2046 浏览

angular - Angular 4动态路由参数数量

在我的 Angular 4 项目中,我在路由中有一个容器组件:

{ 路径:'someComponent',组件:SomeComponentContainerComponent },

当被访问时,它会在这个容器组件内随机创建一个或多个 SomeComponent 实例,并将 URL 更改为如下所示:

'localhost:4200/someComponent/id1/id2/id3/...'

id 的数量取决于创建的实例数量。如果用户访问具有一个或多个可选 id 的上述 URL,则应由容器对象处理以创建相应数量的具有给定 id 的 SomeComponent 实例。

对于这些可选路由参数的静态数量,我可以尝试以下方法:

{ 路径:'someComponent',组件:SomeComponentContainerComponent },

{ 路径:'someComponent/:id1',组件:SomeComponentContainerComponent },

{ 路径:'someComponent/:id1/:id2',组件:SomeComponentContainerComponent },

...

我的问题是,当它们的数量并不总是相同时,如何捕获这些可选路由参数?

非常感谢任何帮助,在此先感谢。

0 投票
3 回答
1073 浏览

angular - 角度 4 中的路由不适用于子组件

我正在routingangular的应用程序中实施。我创建了一个moviecomponenteditmoviecomponent

editmoviecomponent嵌套在moviecomponent,如下面的文件夹结构所示。

在此处输入图像描述

moviecomponent.html 有一个网格,其中有一列包含指向 editmoviecomponent 的 routerlink。我可以在浏览器地址栏中看到似乎正确的链接,但由于某种原因 endmoviecomponent.html 没有被渲染。相反,NotFound 页面被渲染,该页面也在路由中定义。approuting.module 中的路由定义似乎不正确。

电影.component.html

电影组件

编辑movie.component.html

编辑movie.component

审批模块

有人可以告诉我可能是什么问题吗?

0 投票
1 回答
1401 浏览

angular - Angular IO 中根组件的查询参数

我有一个非常简单的 Angular 4+ 应用程序,它从 API 获取数据并显示数据。我相信这应该可以通过仅使用根组件来实现:{path: 'main', component: MainComponent} 和 QueryParams 之类的?id=1.

我能够获取查询参数,但由于某种原因,我的路由器在已经存在的 route+params 部分之后重复了 URL 的 route+params 部分。例如,我的本地地址从localhost:4200/main?id=1into不正确localhost:4200/main?id=1/main?id=1

ActivatedRoute 确实从 URL 中选择了正确的查询参数,但我希望尽可能地清理 URL。如何防止这种重复发生?我<base href='/'>在 index.html 中根据路由要求进行了设置。

模块:

零件:

0 投票
1 回答
481 浏览

angular - Angular Routing:从不同的路由器链接调用同一模块(或组件)上的不同功能

我有一个名为 Items 的模块,我导航到它的 items.Component.ts 形成许多路由器链接。要跟踪我们来自哪个页面,可以将 id 与路由器路径一起传递。

但我想根据我之前来自的页面调用不同的函数ngOnit(). 。如果我从 Menu 导航,我想在 itemscomponent 中调用函数 A,如果我从 Category 导航,我想调用 B

还可以从模块(或组件)html文件或component.ts(视图模型)中完成所需的导航如何角度实现这一点?

0 投票
0 回答
865 浏览

angular - 在 Polyfill.js 中抛出异常但未捕获 - 带有 IE 11 的 angular4

我创建了一个角度应用程序,该应用程序在其他浏览器中运行良好,并且在 IE11、IE10 中出现以下错误。

这是屏幕截图。

在此处输入图像描述

0 投票
4 回答
1363 浏览

angular - Angular 4 中延迟加载的模块出现“组件 X 不是任何 NgModule 的一部分”错误

我有一个包含大量模块的应用程序。它完美地工作。我想让一个模块延迟加载,因为它不经常被普通用户点击。

所以,我将 LazyModule 的路由更改为 use loadChildren,主应用程序仍然可以加载,但是当我尝试点击 LazyModule 的子路由之一时,它给了我这个错误:

错误:未捕获(承诺):错误:组件 HomeComponent 不是任何 NgModule 的一部分,或者该模块尚未导入到您的模块中。

在 LazyModule 中不使用 HomeComponent。它是不同模块的一部分,称为 MainModule。

MainModule 和 LazyModule 都从 ComponentsModule 导入和导出,然后将其导入 app.module。

还有一个 SharedModule 被导入到所有其他提到的模块中。

所以我的问题:

  • 为什么 LazyModule 完全不依赖 MainModule 时会尝试在 MainModule 中加载组件?
  • 为什么它适用于普通路由,但不适用于延迟加载?

在此先感谢您的帮助。

模块在这里:

懒惰模块

主模块

组件模块

应用模块

应用路由模块

编辑:我现在找到了一个解决方法,但我真的想要一个合适的解决方案。hack 只是将我的应用程序中的每个模块都导入到 LazyModule 和 AppModule 中。这是一个糟糕的解决方案,因为拥有延迟加载模块的整个想法是将其与应用程序的其余部分分离,因为它是独立的。我不想将所有内容都导入两次,我也不应该这样做,因为导入的模块都没有在 LazyModule 中使用或引用过。

0 投票
0 回答
100 浏览

angular - Angular 4 路由器:在单个路由器插座中加载多个组件

我有 single <router-outlet>,它是在具有多个子路由的路由上定义的。在这些子路由之间导航时,有时(但不总是)多个子路由组件会加载到同一个<router-outlet>.

什么会导致这种行为?

0 投票
1 回答
582 浏览

angular - 刷新重定向到angular2中的路径

嗨,在我的应用程序中,如果我刷新它会转到主页,我需要避免这种情况并希望重定向到特定的所需路径,无法找到在路由或某处实现此功能的位置,任何人都可以帮助我。我的 app.component 文件

路由文件:

0 投票
1 回答
313 浏览

angular - 配置文件没有在角度 4 中工作

<a routerLink="/Profile">Profile</a>在 index.html 文件中使用时遇到问题。锚标记无法正常工作。我在 index.html 上放置了标题菜单,并希望为 Angular 4 中的路由添加以下代码

<router-outlet></router-outlet>放在 app.component.html中

<a routerLink="/Profile">Profile</a>当我将它放在任何其他组件中但在 index.html 中不起作用时,相同的行代码工作文件

0 投票
2 回答
149 浏览

angular - 如何迭代 Angular 4 的子对象?

已经有一个将对象传递给 DOM 的服务。

让它在这里迭代......

这动态地打开了店面......

但是现在当商店打开时,我迷失了如何迭代项目对象,只显示子对象的键(饮料,罐头)......