Angular记录(8)
Angular记录(8)
文档资料
- 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- 箭头函数--ES6文档:http://es6.ruanyifeng.com/#docs/function#箭头函数
- Promise 对象--JS教程:https://wangdoc.com/javascript/async/promise.html
- Promise--ES6文档:http://es6.ruanyifeng.com/#docs/promise
- Promise--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise
- Promise.prototype.then()--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
- 教程:英雄指南:https://angular.cn/tutorial#tutorial-tour-of-heroes
- 工作区与项目文件的结构:https://angular.cn/guide/file-structure
- 组件简介:https://angular.cn/guide/architecture-components
- CLI 命令参考手册:https://angular.cn/cli
路由
路由:https://www.angular.cn/tutorial/toh-pt5#routing


添加 AppRoutingModule


因为生成项目的时候问是否生产路由配置了,当时选了Y,所以这一步直接看结果

添加路由定义

RouterModule.forRoot()

添加路由出口 (RouterOutlet)





添加路由链接 (routerLink)


添加仪表盘视图

添加仪表盘路由

添加默认路由


把仪表盘链接添加到壳组件中


导航到英雄详情

从 HeroesComponent 中删除英雄详情

添加英雄详情视图

DashboardComponent 中的英雄链接

HeroesComponent 中的英雄链接

移除死代码(可选)

支持路由的 HeroDetailComponent

从路由参数中提取 id

添加 HeroService.getHero()

回到原路


查看最终代码




浙公网安备 33010602011771号