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
Angular路由知识点的更多相关文章
- angular路由——ui.route
angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- angular路由详解:
1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...
- angular 路由的引用
使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install -g angu ...
- angular 路由项目例子
angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...
- Angular路由参数传递
一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...
- angular路由(自带路由篇)
一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
随机推荐
- PHP 使用try catch,捕获异常
<?php header('Content-type:text/html;charset=utf-8'); $a = 1; $b = 2; try { / ...
- Elasticsearch系列---实现分布式锁
概要 Elasticsearch在文档更新时默认使用的是乐观锁方案,而Elasticsearch利用文档的一些create限制条件,也能达到悲观锁的效果,我们一起来看一看. 乐观锁与悲观锁 乐观锁 E ...
- Spring boot 自定义banner
Spring Boot启动的时候会在命令行生成一个banner,其实这个banner是可以自己修改的,本文将会将会讲解如何修改这个banner. 首先我们需要将banner保存到一个文件中,网上有很多 ...
- Linux系统管理第一二三四章 系统管理 目录和文件管理 安装及管理程序 账号管理
命令 功能 序号 第一章 cd 切换目录 1 stat 查看文件状态信息 2 cp 复制 -f -i -p -r 3 du 统计磁盘的大小 4 find 精细查找文件和目录 5 help 帮助 ...
- SpringCloud系列之集成Dubbo应用篇
目录 前言 项目版本 项目说明 集成Dubbo 2.6.x 新项目模块 老项目模块 集成Dubbo 2.7.x 新项目模块 老项目模块 参考资料 系列文章 前言 SpringCloud系列开篇文章就说 ...
- echarts自定义tooltip显示
使用echarts展示图形的时候,鼠标滑倒图像上,想展示除了系列名,数据名,数据值以外的数据,这时需要使用tooltip的fommater方式进行配置,另外对数据格式也有一定的要求. 如图所示:如果想 ...
- STL 训练 POJ - 1862 Stripies
Description Our chemical biologists have invented a new very useful form of life called stripies (in ...
- 数学--数论--HDU 5019 revenge of GCD
Revenge of GCD Problem Description In mathematics, the greatest common divisor (gcd), also known as ...
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 C Buy Watermelon
The hot summer came so quickly that Xiaoming and Xiaohong decided to buy a big and sweet watermelon. ...
- 高精度封装Bignum
还没有写完,目前只实现了加,乘,且不能作用于负数 \(update\ in 20.4.8 添加了高精除低精ddiv函数,比较大小comp函数\) #include <bits/stdc++.h& ...