Angular路由开发的一个实际例子

简介: Angular路由开发的一个实际例子
+关注继续查看

生成一个新的Component:image.png

在NgModule文件app.module.ts里,找到RouterModule.forRoot, 新增一条路由信息:image.png

image.png

这条路由信息将url同Component ProductDetailsComponent关联起来。


我们期望实现的效果是,用户点击产品列表时,跳转到产品明细页面去。因此,打开product-list Component的模板,在标签a上增加路由信息:[routerLink]="[’/products’, productId]"

image.png

同时,这个productId变量尚未在product list Component里声明,因此需要增添一行:index as productId:

image.png

最后的效果:

点击product name超链接后:image.png

跳转到product明细页面:image.png

相关文章
Angular最新教程-第十一节 路由四 (嵌套路由)
Angular最新教程-第十一节 路由四 (嵌套路由)
256 0
Angular最新教程-第十一节 路由四 (嵌套路由)
|
JavaScript 网络架构
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
202 0
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
|
移动开发 JavaScript 网络架构
Angular最新教程-第九节 路由二(路由策略、base标签、路由参数)
Angular最新教程-第九节 路由二(路由策略、base标签、路由参数)
220 0
Angular最新教程-第九节 路由二(路由策略、base标签、路由参数)
|
数据安全/隐私保护
Angular最新教程-第八节 路由一(路由配置)
Angular最新教程-第八节 路由一(路由配置)
154 0
Angular最新教程-第八节 路由一(路由配置)
|
JavaScript 前端开发
angular ui-router:简单的单页面嵌套路由的实现过程
写在前面: ui-router是angular的一个插件,因为angular前面几个版本自带的原生ng-router不能很好的满足开发需求,所以在实现angular单页面嵌套的时候,都是使用ui-router。本文是的内容关于angular ui-router实现过程,内含demo以及代码地址,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,ui-router的实现过程并不复杂,希望通过本文大家能够学会ui-router的使用方法。 ui-router与ng-router: UI-Router是angular原生ng-route进化版,相较与ng-router有如下两条优点:
265 0
angular ui-router:简单的单页面嵌套路由的实现过程
Angular 2.x折腾记 :(4)初步了解路由及使用
路由这块的水挺深,我这里扯扯我用过的一些特性及一丢丢的经验
105 0
|
JavaScript 前端开发 Java
【Angular教程】路由入门
【Angular教程】路由入门
238 0
【Angular教程】路由入门
Angular 路由的一个问题,以及解决方案
Angular 路由的一个问题,以及解决方案
Angular 路由的一个问题,以及解决方案
Angular 路由时如何在 Component 之间传递参数
Angular 路由时如何在 Component 之间传递参数
122 0
Angular 路由时如何在 Component 之间传递参数
|
监控
如何通过ActivationStart监控 Angular的路由激活事件
看个具体的例子: 在app.component.ts里注入Router:
198 0
如何通过ActivationStart监控 Angular的路由激活事件
推荐文章
更多