写一点儿angular7 的路由基础的东西 一个带路有导航栏的一个例子
一:用angular创建一个默认带路由的项目;(上一篇里面有详细介绍)
二:创建需要的组件 ;(这里就用3个组件来举例子,自己可以根据实际需求添加)
- 创建home 组件 ng g c home
- 创建goods组件 ng g c goods
- 创建message组件 ng g c message
三:打开项目文件 找到 app-routing.module.ts 进行路由配置
开始配置路由 这里就以这三个组件为例:
四:编辑挂载组件的html; (本文中 三个组件均挂载在根组件下 所以在 app.component.html 中简单的编辑页面)
其实这个时候基础的路由已经配置好了 可以点击 首页 / 商品 / 消息 看浏览器地址对应的变化 接下来再添加样式 美化一下
因为基础的页面是在根组件 所以在根组件的CSS文件里 写入如下样式 ; (本文中仅是为了演示基础的带有路由的导航栏,所以写的比较基础 )
页面变成这个样子 (要更改每个组件下的内容 需要到对应的组件的html中去编辑)
四:设置默认选中路由 和路由选中状态 (routerLinkActive="active")
在根组件 app.component.html 对应的 app.component.scss 中添加
这个时候再看页面就已经好了
五:设置默认选中路由
然后就没有然后了 希望可以通过这种方式 对更多刚接触angular的小伙伴有些许的帮助