路由跳转
1. 模板方式：<ANY routerLink='/ucenter'></ANY>
2. 脚本方式： constructor(private router:Router){ }
this.router.navigateByUrl('/ucenter')
路由参数：
1.{path:'product/detail/:lid',component: ...}
2.<ANY routerLink="/product/detail/21">
3.ProductDetailComponent.ts
constructor(private route:ActivatedRoute,private http:HttpClient){ }
ngOnInit(){
this.route.params.subscribe((data)=>{data.lid})
}
练习：创建下述组件：
ng g component index 点击超链接，可以跳转到用户中心
ng g component user-center
ng g not-found
为每个组件分配路由地址：app.module.ts
indexComponent: ""
UserCenterComponent: "user/center"
NotFoundComponent: "**"
声明路由组件的挂载点/路由出口： app.component.html
<router-outlet></router-outlet>
访问测试：
点击超链接，可以跳转到用户中心-----用两种方法实现
1.补充知识点：路由嵌套
一级路由：
index: 首页
user/center:用户中心
二级路由:
user/center/info: 用户中心>我的信息
user/center/avatar: 用户中心>更改头像
user/center/security: 用户中心>安全管理
路由嵌套修改路由词典：
const routes = [
{ path:'index',component:IndexComponent },
{
path:'user/center',
component:UserCenterComponent,
children:[
{ path:'info',component: InfoComponent },
{ path:'avatar',component: AvatarComponent},
{ path:'security',component: SecurityComponent }
]
}
]
注意:"用户中心"下的二级路由组件挂载点/路由出口应该放在UserCenter.component.html中
2.补充知识点：路由守卫
商业项目中，有些路由地址只能在特定条件下才能访问，例如;
用户中心，只能在登录后访问(回话限制)；
TMOOC视频播放，只能在学校内播放(客户端IP地址限制)；
VIP学院视频播放，只能自13：00~220:00时间内才能播放(时间限制)；
商城后台所有页面，只能登录为管理员后才能使用(权限限制)；
.....
Angular提供了“路由守卫(Guard)‘’来实现访问路由组件前的检查功能：如果检查通过(return true)就放行；
如果检查不通过(return false)就阻止访问。
使用路由守卫的步骤：
1.创建路由守卫class ----- 可使用 ng generate guard 守卫名
@Injectable({ providedIn:'root' })
export class LoginGuard{
canAactivate(){
return true //允许激活
return false //阻止激活
}
}
2.在路由词典中使用路由守卫
{path:'',component:..,canActivate:[LoginGuard]}
练习：创建路由守卫TimeGuard,检测当前系统时间，如果在6点~23点之间允许访问，
否则不允许访问；把此守卫用于“用户中心”组件。
3.创建移动App可用技术
技术名称 典型代表 优势 劣势
原生开发 Android:Java或Kotlin 运行速度快、功能丰富 两张设备互不兼容，开发速度慢
Native Code IOS:Object-C或Swift
--------------------------------------------------------------------------------------------------------------
WebView开发 Vue.js + Mint-UI 开发速度快 运行速度慢、功能有限
HTML5/CSS/JS
--------------------------------------------------------------------------------------------------------------
混编开发 Phonegap/Cordova 开发速度快、 运行速度慢
H5 + 原生 Angular + lonic 功能丰富
--------------------------------------------------------------------------------------------------------------
JS Bridge React + ReactNative 开发速度快、 两种平台下原生
编码是JS，运行的是原生代码 运行速度快、 组件效果不一样
功能丰富
------------------------------------------------------------------------------------------------------------
GPU绘图 Google Flutter/Dart 运行速度快、 目前还有不足(例如绘图库
功能丰富、 代码过大）
两种平台下的效果完全一样
-----------------------------------------------------------------------------------------------------------------
关于Vue.js的组件库/资料： github搜 awesome vue
关于Angular的组件库/资料： github搜 awesome angular
关于React的组件库/资料： github搜 awesome react