今天完成的事情：

Angular 8大Core之route

HTML部分

<a [routerLink]="['/']">主页</a>

[]传递的是一个数组

<a [routerLink]="['/product', 1]">商品详情</a>

<input type="button" value="商品详情" (click)="toProductDetails()">

<router-outlet></router-outlet>

            这里是一个插座

‍‍辅助路由要加 name:‍‍

typescript部分

路径以及调用的组件Component

const routes: Routes = [

    { path: 'product/:id', component: ProductComponent },

    { path: '', component: HomeComponent },

    { path: '**', component: Code404Component }

];

ng2 core之一的路由系列

重定向路由

{ path: '', redirectTo: '/home', pathMatch: 'full' },

子路由

{ path: 'product/:id', component: ProductComponent, children: [

    { path: '', component: ProductDescComponent },

    { path: 'seller/:id', component: SellerInfoComponent }

辅助路由

{ path: 'chat', component: ChatComponent, outlet: 'aux' },

路由守卫(调用路由守卫服务)

], canActivate: [LoginGuard]},

随机产生一个随机数做登陆守卫测试

import { CanActivate } from '@angular/router';

export class LoginGuard implements CanActivate {

  canActivate() {

    let loggedIn: boolean;

    loggedIn = Math.random() < 0.5;

    if (!loggedIn) {

      console.log('用户未登录');

    }

    return loggedIn;

  }

}

明天计划的事情：

‍‍提供器入门‍‍‍‍‍‍‍‍‍‍

‍‍使用工厂和值声明提供器‍‍‍‍‍‍‍‍‍‍

‍‍注入器及其层级关系

‍‍事件绑定 

‍‍Dom属性绑定

‍‍html属性‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

遇到的问题：

‍‍atom没有import插件，纯手动引用库。。。

收获：

在ngOnInit钩子产生一个参数订阅

ngOnInit() {

    // 参数快照 snapshot

    // this.productId = this.routeInfo.snapshot.queryParams["id"];

    // params不用?号

    // 这个路由的（参数订阅（通过一个匿名函数 这个产品的id 等于参数的id））

    this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);

  }

subscribe这个方法来源于rxjs在这里只是先了解了一点参数订阅的只是

如果是同一个对象可能访问自身，使用参数订阅的方法，反之，使用参数快照。

‍‍‍‍路由就是路由器和插座，再加上拥有蛇杖的小Y，路由守卫就类似于小Y，把关蛇杖，guard，‍‍‍‍

‍‍canActivate把关蛇杖，不过关不让过，‍‍

‍‍canDeactivate就是防止逃脱的蛇杖，不让离开。‍‍‍‍‍‍‍‍‍‍