Angular应用带参数的路由实现

先看需求：在dashboard页面，点击任何一个hero之后，

期望跳转到明细页面：同时浏览器地址栏也对应发生变化。

下面是具体实现步骤。

(1) app module：其中应用逻辑包含在NgModule的declarations区域内：

(2) AppRouter的实现：可以跳转到Hero Component，Hero detail Component和dashboard Component，其中路由到detail Component就是通过带参数的配置完成的，下图第11行detail/:id中的冒号，代表后面的id为url中的跳转参数。

现在hero Component仅仅是显示hero 列表：

而hero detail Component，显示hero属性对象的id和name：

然而detail Component的hero属性，是从哪里被赋值的呢？
查看其实现文件可知，从detail Component的route属性里提取出被点击的hero id，然后调用hero service根据hero id拿到具体的hero数据，再写入Component的hero属性。

The ActivatedRoute holds information about the route to this instance of the HeroDetailComponent. This component is interested in the route’s parameters extracted from the URL. The “id” parameter is the id of the hero to display.

其中route属性的类型ActivatedRoute，维护了detail Component实例的路由信息。

(3) 最后是dashboard的实现：

使用routerLink指令配置每个a标签的href属性：

最后生成的原生html页面里的href属性值：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular应用带参数的路由实现相关推荐

ant design pro之带参数的路由
脚手架默认支持带参数的路由,但是在菜单中显示带参数的路由需要在代码中自行处理 {path: '/dashboard/:page',hideInMenu:true,name: 'analysis',co ...
nuxt 带参数动态路由
nuxt是基于vue.js服务端渲染的框架,其中路由文件不像vue项目那样手动配置,而是依据 pages 目录结构自动生成 vue-router 模块的路由配置. 基于项目seo优化需求,需要将路由 ...
angular获取路由参数_Angular应用带参数的路由实现
先看需求:在dashboard页面,点击任何一个hero之后, 期望跳转到明细页面:同时浏览器地址栏也对应发生变化. 下面是具体实现步骤. (1) app module:其中应用逻辑包含在NgModu ...
vue --- 使用vue-router获取带参数的路由
希望的效果如下: 2个路由: 点击如下步骤. 使用 router-link 来指定路由路径在router.js中指定路径的事件处理函数(对应的组件) 创建对应的组件 router-link 找 ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...
Python：闭包(简介、使用方法、nonlocal修改闭包内使用的外部变量)、装饰器(定义、作用、通用装饰器、多个装饰器、带参数的装饰器、类装饰器、装饰器方式添加WEB框架的路由）
一.闭包的介绍闭包可以保存函数内的变量当闭包执行完毕,外部函数的变量才释放. # 闭包的作用:可以保存外部函数的变量 # 闭包的形成条件 # 1.函数嵌套 # 2.内部函数使用了外部函数的变量或者 ...
vue路由跳转写法在html,详解vue 路由跳转四种方式 (带参数)
1. router-link 1. 不带参数 //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由 ...
微信小程序路由，带参数跳转及接收
微信小程序的跳转形式有多种 1.wx.navigateTo 保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面带参数跳转,以下都是一样. wx.navigateTo({url: ...
ANGULAR自带指令有哪些？
1.背景介绍 AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. 2.知识剖析 angula ...

Angular应用带参数的路由实现

Angular应用带参数的路由实现相关推荐

最新文章

热门文章