Angular4.0基础知识之组件
Angular4.0基础知识之路由
Angular4.0依赖注入
Angular4.0数据绑定&管道
路由
简介
接下来学习路由的相关知识
本来是不准备写下去的，因为当时看视频学的时候感觉自己掌握的不错 ( 这是一个灰常不好的想法 ) ,过了一段时间才发现Angular这个对我这个PHP程序猿来说不太常用的东西非常容易忘！幸好之前去写了笔记。
首先需要先了解一个概念(SPA)，也就是单页面应用，一个页面只加载一次，不再刷新，只改变页面部分内容的应用。
路由的作用就是为每一个视图分配一个唯一的URL，进入这个URL的时候，使应用跳到某个特定的视图状态。
创建
在创建项目的时候 ， 带上参数ng new RouterDemo --routing即可生成一个带路由文件的项目
Angular路由常见对象
| 名称 | 简介 |
|---|---|
| Routes | 路由的配置，URL和组件之间的映射以及组件和组件插座RouterOutlet的映射关系 |
| RouterOutlet | 在HTML中标记组件插入位置的占位符标签 |
| Router | 在运行时执行路由的对象,navigate()和navigateByUrl()方法导航到指定的路由，使用依赖注入在控制器中获取 |
| RouterLink | 在HTML中声明路由导航的标签属性 |
| ActivatedRoute | 当前激活的路由对象，保存着当前路由的信息，如路由地址参数等，使用依赖注入在控制器中获取 |
在项目中,路由文件通常为app-routing.module.ts
配置
打开路由文件，在routes:Routes对象中定义路由列表，其中，每一个路由至少包含两个参数，即path和component也就是URL和组件的映射关系
注意：这里的
path最好不要以/开头,否则会导致路由URL相对关系的混乱，Angular会自动帮你处理和子路由的关系，除非你明确知道你要做什么
app-routing.module.ts源码
import {NgModule} from '@angular/core'
import {RouterModule, Routes} from '@angular/router';
import {ProductDetailComponent} from './product-detail/product-detail.component';
import {HomeComponent} from './home/home.component';
const routes: Routes = [
{path: '', component: HomeComponent},
{path: 'product/:prodTitle', component: ProductDetailComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule {}
app.module.ts修改部分
imports: [
...
AppRoutingModule
...
],
如上,最简单的路由便定义完毕啦
插座
所谓的插座,也就是在HTML中定义的路由对应的组件插入点
使用<router-outlet></router-outlet>标签定义路由对应组件的插入位置(在该标签下面)
路由链接
使用<a [routerLink]=['/product']>商品详情</a>来定义一个路由导航链接
注意这里的路由字符串需要加上
/，后面我们会使用./等来区分路由和子路由
路由的参数是一个数组而不是字符串，因为后面我们需要给路由传递参数
然后我们就可以通过点击商品详情链接来显示product组件的内容了
使用Router对象进行导航
当你定义了一个事件进行跳转的时候，例如：
<input type="button" (click)="toProductInfo()" />
控制器代码
export class AppComponent {
// 使用依赖注入拿到Router对象
constructor(private router:Router){}
// 事件绑定的方法，跳转
toProductInfo() {
this.router.navigate(['/product']);
}
}
即可实现用代码进行路由跳转
默认路由
当输入一个不存在的地址时，路由插座区域无法显示，并且会在控制台抛出异常，我们可以通过定义一个默认路由（例如404page）来避免错误发生
首先，我们生成一个新的组件，运行ng g component code404
生成404页面组件，简单编写内容之后，进入路由配置文件，添加一个新的路由配置信息
...
// 放在最后，当匹配不到的时候会选择此路由
{path:'**',component:Code404Component}
传递参数
传递
| 传递方式 | 形式 | 获取方式 |
|---|---|---|
| 查询参数传递（GET方法） |
<a [routerLink]=['/product'] [queryParams]="{id:1}"></a>=>/?id=1&name=jeffrey |
ActivatedRoute.queryParams['id'] |
| 在路由形式中定义参数 | {path:'product/:id'}=><a [routerLink]=['/product/',1]></a>=>/product/1 |
ActivatedRoute.params['id'] |
| 在路由配置中定义静态数据 | {{path:'product/:id',component:ProductComponent,data:[{osProd:true}]}} | ActivatedRoute.data[0]['isProd'] |
获取
在constructor构造函数参数中使用依赖注入获取到ActivatedRoute存入routeInfo变量，在ngOnInit()取出参数
- 直接取出（参数快照）
this.productId=this.routeInfo.snapshort.queryParams['id'] - 关联获取（参数订阅），在同翼哥组件之间路由的时候，由于
ngOnInit()只会执行一次，导致参数不能刷新，这时候可以使用参数订阅来关联地获取到参数。（下面例子使用了箭头函数）this.routeInfo.params.subscribe((params:Params)=>this.productId=params['id'])
重定向路由
在访问一个特定路由时，重定向到另一个指定地址
例如：
{path: '', redirectTo:'/home',pathMatch:'full'},
{path: 'home', component: HomeComponent},
pathMatch指匹配策略
当我们访问http://127.0.0.1:4200的时候，会自动跳转到http://127.0.0.1:4200/home
子路由
在一个路由的组件中展示其他组件的内容时，使用子路由来实现。
其实更应该理解为“子组件”，也就是一个大的组件里的一部分，使用子路由来控制
在主路由的routerOutlet显示主路由的组件内容时，根据子路由的变化，在主路由组件中子路由对应routerOutlet位置显示对应的子路由组件
辅助路由
形式：<router-outlet name="fuzhu"></router-outlet>
{path:'xxx',component:XxxComponent,outlet:'fuzhu'}
<a [routerLink]=['/home',{outlets:{fuzhu:'xxx'}}]>链接</a>或<a [routerLink]=[{outlets:{primary:'home',fuzhu:'xxx'}}]>链接</a>
当点击链接的时候，主插座会显示home组件的内容，fuzhu插座会显示xxx路由匹配到的Xxx组件
<a [routerLink]=[{outlets:{fuzhu:'xxx'}}]>链接</a>
当点击链接的时候，主插座不变，fuzhu插座会显示xxx路由匹配到的Xxx组件
<a [routerLink]=[{outlets:{fuzhu:null}}]>链接</a>
当点击链接的时候，fuzhu插座不显示任何组件
辅助路由允许你在同一个组件中定义多个插座，并定义每个插座显示的内容
路由守卫
简介
所谓的路由守卫，也就是在满足一定条件的时候才允许进入或退出某一个路由。例如：
- 在用户登录之前，不允许进入个人中心页面
- 在某个表单的执行流程中，只有用户完成了上一步的任务之后，才能进入下一步的环节
- 当用户没有执行保存操作而试图离开某一个路由的时候，阻止离开并进行提示
路由守卫主要有三种类型：
- CanActivate 是否能进入到某个路由
- CanDeactivate 是否能离开某个路由
- Resolve 在路由激活之前获取数据
现在，在路由对象里我们有多了一个新的参数：canActivate，该参数是数组格式，也就是说，一条路由允许接收多个守卫
那么如何编写守卫呢？
canActivate守卫
在src目录中建立一个存放守卫的目录guard，新建路由守卫TypeScript文件，例如login.guard.ts，下面展示一个简单的Demo：
（为了便于演示，不去做真正的登录服务，只是生成一个随机数来判断是否已经登录）
import {canActivate} from "@angular/router";
export class LoginGuard implements CanActivate {
canActivate(){
// 假设随机数小于0.5就代表已经登录
let isLogin:boolean = Math.random()<0.5;
if(!isLogin){
console.log("未登录");
}
return isLogin;
}
}
import {LoginGuard} from "./guard/login.guard";
{path:'product/:id',component:ProductComponent,children:[......],canActivate:[LoginGuard]}
...
@NgModule({
imports:[...],
exports:[...],
providers:[LoginGuard]
})
这样，我们就是先了一个简单的路由守卫，当我们试图导航到这个路由的时候，会判断守卫返回的Boolean值，为True则通过。
！还有这种操作？！在学Angular的时候顺便学了TypeScript~
canDeactivate守卫
同理，我们能很轻易地区是先一个canDeactivate守卫，区别在于canDeactivate守卫在是先接口的时候需要制定一个泛型（也就是需要保护的组件），算了，直接上代码吧：
import {CanDeactivate} from "@angular/router";
import {ProductComponent} from "../product/";
export class UnsavedGuard implements CanDeactivate<ProductComponent>{
/*
需要实现一个方法
因为是需要离开，那么这里需要根据组件里的某些状态来判定
*/
canDeactivate(component:ProductComponent){
return window.confirm("您还没保存，确定要离开吗？");
}
}
Resolve守卫
Resolve守卫常用于解决数据预加载问题，如果使用路由中传递的参数，在进入某一个组件之后发出Http请求去获取所需要的数据，那么在刚进入这个组件的时候，所有使用插值表达式的位置都是空的，这样用户体验会很差。这时候可以使用Resolve守卫来解决，在进入之前先获取数据，进入之后立即使用并显示出来
import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
import {Product} from '../product/product.component';
import {Observable} from 'rxjs/Observable';
import {Injectable} from '@angular/core';
@Injectable() // 装饰器，允许注入
export class ProductResolve implements Resolve<Product> {
// 注入路由对象
constructor(private router: Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Product | Observable<Product> | Promise<Product> {
const productId: number = route.params['id'];
if (productId === 1) {
return new Product(1, '小米6', 2999, 5, '很不错的手机', ['数码'])
} else {
this.router.navigate(['/home']);
return undefined;
}
}
}
在路由中我们有遇到了一个新的参数：resolve，接收一个数组（Resolve守卫）
{path:'product/:id',component:ProductComponent,resolve:{product:ProductResolve}}
同样需要在providers里声明一下。
那么如何取出Resolve守卫传入的数据呢？
同样可以使用参数订阅的方式：
// routeInfo:ActivatedRoute
this.routeInfo.data.subscribe((data:{product:Product})=>{
this.productId=data.product.id;
});
好了，路由的知识点到现在就告一段落，但是Angular的学习之路仍未完待续......