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 ...
随机推荐
- Zabbix3.4安装部署
Zabbix3.4安装部署 一.系统环境 cat /etc/redhat-release CentOS Linux release 7.3.1611 (Core) 关闭防火墙及selinux sy ...
- Ubuntu 18.04更换apt-get源
使用apt-get安装时,会很慢,更换了国内的源后,就可以解决这个问题了. 1. 备份sources.list文件 sudo cp /etc/apt/sources.list /etc/apt/sou ...
- linux系统的简单配置
配置网卡:vim /etc/sysconfig/network-scripts/网卡名称 ifcfg-xxxx ##文件名称 DEVICE=xxx ##设备名称 BOOTPROTO=dhcp|st ...
- mac OS 安装 Homebrew软件包管理器
Homebrew macOS 缺失的软件包的管理器 中文官网 https://brew.sh/index_zh-cn 获取安装命令 /usr/bin/ruby -e "$(curl -fsS ...
- 《Java 开发从入门到精通》—— 2.3 使用IDE工具序
本节书摘来异步社区<Java 开发从入门到精通>一书中的第2章,第2.3节,作者: 扶松柏 , 陈小玉,更多章节内容可以访问云栖社区"异步社区"公众号查看. 2.3 使 ...
- 洛谷P1217 回文质数
题目描述 因为 151 既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找出范围 [a,b] (5 \le a < b \le 100,000 ...
- OSG程序设计之Hello World 4.0
代码如下: //需要添加两个库:osgUtild.lib.osgTextd.lib #include <osgDB/ReadFile> #include <osgUtil/Optim ...
- Codeforces Round #639 (Div. 2)
Codeforces Round #639 (Div. 2) (这场官方搞事,唉,just solve for fun...) A找规律 给定n*m个拼图块,每个拼图块三凸一凹,问能不能拼成 n * ...
- GIL-Guilds(黑白灰染色)
传送门门门门门咩咩咩咩咩咩咩咩咩咩咩咩 \(这题真是扯谈!!!\) \(灰色很高级是吧,但是题目没要你把颜色全部用上去啊!!!\) \(黑色或者白色只有一个条件,但灰色需要和所有三种颜色都相邻.这么难 ...
- Linux编程实现递归查找文件
命令格式如下:SCRIPT_NAME SEARCH_ON_DIR SEARCH_FILENAME #!/bin/bash Find(){ files=`` for file i ...