路由跳转

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路由知识点的更多相关文章

  1. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. angular路由详解:

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  3. angular 路由的引用

    使用angular路由 遇到的坑. 使用cmd 安装好node.js 安装成功 输入node  -v 能查看版本说明安装成功 搭建angular项目输入命令 npm install  -g  angu ...

  4. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  5. Angular路由参数传递

    一.路由时传递参数的方式 1.在查询参数中传递数据 //页面 <a routerLink="/product" [queryParams]="{id:1}" ...

  6. angular路由(自带路由篇)

    一.angular路由是什么? 为了实现SPA多视图的切换的效果,其原理可简述为每个 URL 都有对应的视图和控制器.所以当我们给url后面拼上不同的参数就能通过路由实现不同视图的切换. 二.文件总览 ...

  7. Angular路由守卫 canActivate

    作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...

  8. Angular路由守卫 canDeactivate

    目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...

  9. Angular 路由守卫

    1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...

随机推荐

  1. PHP 使用try catch,捕获异常

    <?php     header('Content-type:text/html;charset=utf-8');    $a = 1;    $b = 2;    try {        / ...

  2. Elasticsearch系列---实现分布式锁

    概要 Elasticsearch在文档更新时默认使用的是乐观锁方案,而Elasticsearch利用文档的一些create限制条件,也能达到悲观锁的效果,我们一起来看一看. 乐观锁与悲观锁 乐观锁 E ...

  3. Spring boot 自定义banner

    Spring Boot启动的时候会在命令行生成一个banner,其实这个banner是可以自己修改的,本文将会将会讲解如何修改这个banner. 首先我们需要将banner保存到一个文件中,网上有很多 ...

  4. Linux系统管理第一二三四章 系统管理 目录和文件管理 安装及管理程序 账号管理

    命令 功能 序号 第一章   cd 切换目录 1 stat 查看文件状态信息 2 cp 复制   -f -i -p -r 3 du 统计磁盘的大小 4 find 精细查找文件和目录 5 help 帮助 ...

  5. SpringCloud系列之集成Dubbo应用篇

    目录 前言 项目版本 项目说明 集成Dubbo 2.6.x 新项目模块 老项目模块 集成Dubbo 2.7.x 新项目模块 老项目模块 参考资料 系列文章 前言 SpringCloud系列开篇文章就说 ...

  6. echarts自定义tooltip显示

    使用echarts展示图形的时候,鼠标滑倒图像上,想展示除了系列名,数据名,数据值以外的数据,这时需要使用tooltip的fommater方式进行配置,另外对数据格式也有一定的要求. 如图所示:如果想 ...

  7. STL 训练 POJ - 1862 Stripies

    Description Our chemical biologists have invented a new very useful form of life called stripies (in ...

  8. 数学--数论--HDU 5019 revenge of GCD

    Revenge of GCD Problem Description In mathematics, the greatest common divisor (gcd), also known as ...

  9. 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. ...

  10. 高精度封装Bignum

    还没有写完,目前只实现了加,乘,且不能作用于负数 \(update\ in 20.4.8 添加了高精除低精ddiv函数,比较大小comp函数\) #include <bits/stdc++.h& ...