angular2 看这篇就够了

2018-07-13 admin

提前申明

该文章并非是全部angular知识,只是个人开发过程中最常用的

简介

Angular2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。 Angular2 是 Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。 Angular2 发布于2016年9月份,它是基于ES6来开发的。

路由

路由参数

无参

{path:'all',component:AllComponent}

必填参数

{path:'all/:id',component:AllComponent}

路由跳转

通过html跳转

相对路径跳转

[routerLink] = "['main/components/all']" [queryParams]="{page:99}" 必须引入RouterModule

绝对路径跳转

[routerLink] = "['/main/components/all']" [queryParams]="{page:99}"

通过JS跳转

this.Router.navigate(['/main/components/all'],{queryParams:{name:1}})

获取路由参数

获取必填参数

constructor(private ActivatedRoute){
   this.ActivatedRoute.params.subscribe((params:any)=>{
   console.log(params.name)
 )}
}

获取可选参数

this.ActivatedRoute.queryParams.subscribe((queryParams)=>{
   console.log(queryParams)
 )}

显示路由内容

<router-outlet></router-outlet>

路由预加载

路由配置

{
   path:'main',
   loadChildrend:"./modules/main/index#MainModule",
   data:{preload:true}
}

模块里配置使用的预加载规则

RouterModule.forRoot(ROUTES,{useHash:false,pre;oadingStrategy:PreloadingSelectedModules})

预加载的逻辑代码

import {PreladingStrategyRoute} from "@angular/router";
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
@injectable()
export class PreloadingSelectedModules implements PreloadingStrategy{
   preload(route:Route,fn:()=>Observable<any>:Observable<any>){
   let data:any = route.data;
   return data && data.preload?(route.loadChildren as Function)():Observable.of(null)
}
}

路由守卫

简介

路由守卫守护路由,用户必须具备一定的条件才能跳转到指定的路由

路由配置

{
   path:"main",
   canActivate:[AuthGuardService],
   loadChildren:"/modules/main/index#MainModule"
}
路由守卫代码
import {Injectable} from '@angular/core';
import {AuthService} from './auth.service';
import {Router,ActivatedRouteSnapshot,RouterSnapshot} from "@angular/router";
import {CanActivate} from '@angular/router'
@Injectable()
export class AuthGuardService implements CanActivate{
  constructor(private AuthService:AuthService
              private router:Router
                ){}
  checLogin(url){
  if(this.AuthService.isLoggedIn){
     return true;
 }
  //存储用户尝试访问的路径
  this.AuthService.redirectUrl = rul;
  //没登录过就去登录页面
  this.router.navigate(["/login"]);
  return false;
 }
  //实现这个接口,进行身份验证
  canActivate(route:ActivatedRouteSnapshot,state:RouterStateSnapshot):boolean{
  return this.checkLogin(state.url);
 }
}

原文链接:https://segmentfault.com/a/1190000015623891

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-35898.html

文章标题:angular2 看这篇就够了

相关文章
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
CSS2.0帮助文档(参考手册)chm下载
下载地址:CSS2.0帮助文档(参考手册)chm下载 友情提示:如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
AngularJS vs. jQuery,看看谁更胜一筹
很多Web开发新手都会有这样的疑问“我应该使用什么开发框架呢,如何快速学会Web开发呢?”这个问题其实没有一个统一的正确答案,其中讨论最多的就是AngularJS和jQuery的差别。这两者的之间的比较很微妙,有时就像拿苹果和橘子在作比较,...
2015-11-12
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
从 Node.js 分裂出 Io.js 事件看开源软件谁做主
Node.js 作为服务器编程语言的后起之秀,常用来构建和运行 Web 应用,近日却爆出其社区出现分裂。由于对官方运营商 Joyent 公司在 Node.js 管理上的长期不满,多位核心开发者另立门户,创建了分支 Io.js。从 GitHu...
2015-11-12
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
JavaScript初学者必看“箭头函数”
本文我们介绍箭头 (arrow) 函数的优点。 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2); &#x2F;&#...
2017-05-26
回到顶部