Angular学习笔记（一）

1、样式绑定

[class.glyphicon-star-empty]="star"用class表示绑定的属性是样式属性即表示：当star的值为true的时候，样式信息中会增加glyphicon-star-empty样式

2、父子组件之间的通信

例如：<app-product>组件是<app-star>组件的父组件，即表示存在如下调用：<app-product>  <app-star></spp-star></app-product>此时在子组件<app-star>中需要获取其父组件的某个属性的值：rating,则在子组件<app-star>组件   中需要申明如下：@Input()public rating = 0;表明rating这个属性的值应该由该组件的父组件传递过来。因此在父组件<app-product>中调用子组件的地方应该为：<app-product>  <app-star [rating]="product.rating"></spp-star></app-product>这样就将父组件的product中的rating属性的值传递给子组件中的rating属性中

3、routerLink的使用

作用：就是在a标签中添加routerLink来达到路由的作用。<a [routerLink]="['/']">主页</a><a [routerLink]="['/product']">商品详情</a>上面一个就是在点击主页的时候，将跳转到路由'/'上，然后由配置的路由规则显示相应的组件对应的模板信息；下面一个则是在点击‘商品详情’的时候将路由到'/product'所对应的组件的模板信息。注意：在添加routerLink时，等号右边的内容是在一个数组中的，用[]来设置数组的信息，而且如果路由的时候需要传递参数的时候则可以在数组中继续添加值。

4、配置通配路由

首先，路由采用的是顺序匹配的方式，即，在路由匹配的信息中是由上到下进行匹配的，一般在最后设置一个通配的路由信息，以拦截用户的不正当路由的输入。{path: '**', component: Code404Component}这就表示当输入的是前面都没有匹配到的路由的时候就跳转到Code404Component这个组件中去

5、路由传递参数

①、通过设置querParams来传递参数

例如:<a [routerLink]="['/product']" [queryParams]="{id: 1}">商品详情</a>表明当点击商品详情的时候将会路由到'/product'中，然后会传递一个参数名是id,值是1的参数注意：a、跟添加routerLink一样，都需要加上[],即：[queryParams],这就表示绑定了一个routerLink和queryParams。b、同时，需要注意的是[queryParams]的等号右侧，将id:1放在一个大括号中，表示传递的参数是一个对象。使用上述方法传递的参数，在相应的路由到的组件中通过如下方式获取参数的值，比如路由到'/product':  this.productId = this.routerInfo.snapshot.queryParams['id'];说明：其中routerInfo是ActivatedRoute类型，要使用的时候需要在构造函数中进行注入，该类型就是用来传递路由过程中的所有的信息。

②、在url中传递参数

首先：将路由配置中的path的属性的值进行修改，如下：    {path: 'product/:id', component: ProductComponent}  特点就是在原来product/后面添加':id'，表示传递一个参数名为id的参数。然后：将相应的将要路由到product的模板中的内容进行修改，如下：    <a [routerLink]="['/product',1]">商品详情</a>  此时点击商品详情时将会传递一个参数1过去，对应的就是赋值给id，其达到的效果和上述的通过    queryParams传递的参数是一样的。最后：在product所路由到的组件中获取传递过来的参数值，采用如下的方式：    this.productId = this.routerInfo.snapshot.params['id'];  说明：相比上面使用queryParams传递参数时获取参数的方法而言，只是将'.queryParams'改为了'params',从而达到了同样获取参数的目的。注意：使用snapshot(快照)的方式获取参数时，会出现如下问题：   当组件被创建的时候，会调用组件的构造函数和ngOnInit方法，如果该组件在ngOnInit方法中进行获取参数并且赋值给该组件中的projectId(如下所示：),因为ngOnInit方法只会调用一次，所以当之后再次点击商品详情按钮并且传递进来一个新的参数的时候，会出现无法获取到当前的新参数，从而this.productId的值不是新传进的参数值。     ngOnInit() {       this.productId = this.routerInfo.snapshot.params['id'];     }解决这个问题可以将获取参数的方法改为如下即可：this.routerInfo.params.subscribe((params: Params) => {    this.productId = params['id']});即：采用subscribe（订阅）的方式来订阅参数，每当有新的参数传递进来的时候就会调用这个参数订阅的方法，从而获取新的参数值并且赋值给this.productId。

③、固定参数传递

在路由配置中每一条路由信息后面添加固定参数即可。

6、路由守卫

①、使用CanActivate:处理从A组件路由到B组件时，在B组件中验证的情况

例如编写LoginGuard来守卫如果路由到当前路由时必须是已经登录的状态，则：首先：创建LoginGuard组件并且实现CanActivate,重写里面的canActivate（）方法，可以在该方法  中编写判断时候登录的逻辑。然后：在路由配置信息中给需要添加守卫路由的配置添加如下信息：{path: 'product/:id', component: ProductComponent, canActivate: [LoginGuard]}其作用就是当用户点击跳转到product路由的链接时，首先会进入到守卫路由，当守卫路由验证通过的时候，才会跳转到ProductComponent组件中。说明：在实现canActivate()方法的时候，需要返回boolean类型，为true的时候验证通过，false的时候验证失败。最后：在NgModule的providers中添加上LoginGuard即可，以上便实现了当用户路由到product时， 会判断当前用户是否登录，如果登录返回true则导航到相应路由，如果没有登录则返回false则还停留在当前路由。

②、使用CanDeactivate：处理从A组件路由到B组件时，离开A组件时验证的情况

基本的使用方法同CanActivate相似，例如定义一个UnsavedGuard组件,并且实现CanDeactivate<ProductComponent>，并且带有泛型，传入的参数是将要守卫的组件（即表示所要离开的组件），然后，在Routers中添加：{path: 'product/:id', component: ProductComponent, canActivate: [LoginGuard],          canDeactivate: [UnsavedGuard]}这个作用就是，当在组件ProductComponent的时候，点击其他的路由跳转到其他的组件时，会首先进入守护路由UnsavedGuard中，当验证通过之后才能跳转到将要路由去的组件，如果没有验证成功则留在该组件。最后，不要忘了在NgModule中的providers中添加UnsavedGuard即可。

③、Resolve:在路由激活之前获取路由数据

（未完待续...）