Angular路由知识点

路由跳转

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/">

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