官网学习angular2笔记

怎么说呢，之前一直不想学angular2，因为之前学了ag1，听同事说2改变挺大的要完全重学，再加上之前学了vue感觉确实很好用，就没打算学ag2但是现在要自己重构项目，也就厚着脸皮学了。这应该是学习的第四天。开始跟着英雄教程走，越接触越觉得和vue还是有很多共同点的

言归正传：这里主要记录路由

1、引入路由之前要确定在index.html里面有设置根路径

<base href="/">

2、在根模块中引入router模块

import { RouterModule, Routes } from '@angular/router';

3、配置

const appRoutes: Routes = [
  //:id是一个路由参数的令牌(Token)
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
    //data属性用来存放于每个具体路由有关的任意信息。该数据可以被任何一个激活路由访问，并能用来保存诸如 页标题、面包屑以及其它静态只读数据
  },
  { path: '',//空的一般指代默认路径
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
  //**路径是一个通配符 一般用做404的输出
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here 这里对应上面的常量
  ],
  ...
})
export class AppModule { }

路由器使用先匹配者优先的策略来选择路由。 通配符路由是路由配置中最没有特定性的那个，因此务必确保它是配置中的最后一个路由。

{
 path:'post',
 loadChildren:'./post/post.module#PostModule'
}

4、路由出口

<router-outlet></router-outlet>

这里就和vue的routerview是一样的表示显示定义了routerLink的模块或者其他

template: `<h1>Angular Router</h1><nav><a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a><a routerLink="/heroes" routerLinkActive="active">Heroes</a></nav><router-outlet></router-outlet>
`

 onSelect(hero: Hero) {this.router.navigate(['/hero', hero.id]);}

它用一个链接参数数组调用路由器的navigate方法。 如果我们想把它用在HTML中，那么也可以把相同的语法用在RouterLink中。

ActivatedRoute：一站式获取路由信息

该路由的路径和参数可以通过注入进来的一个名叫ActivatedRoute的路由服务来获取。 它有一大堆有用的信息，包括：

import { Router, ActivatedRoute, Params } from '@angular/router';

这里导入switchMap操作符是因为我们稍后将会处理路由参数的可观察对象Observable。

import 'rxjs/add/operator/switchMap';

通常，我们会直接写一个构造函数，让Angular把组件所需的服务注入进来，自动定义同名的私有变量，并把它们存进去。

constructor(private route: ActivatedRoute,private router: Router,private service: HeroService
) {}

模块懒加载

项目结构

一般是在routing.module中定义对应的路径和组件然后再在@ngModule的import中导入这个路径数组常量或者在module中的@ngModule中引入routing.module   export 的路径数组常量

eg:1  如上面的方法一样

eg2:

当然在上面的时候还要在最初引入这些模块才能直接使用  根路由用forRoot,子路由用forChild,这样在routing.module中就只用export 常量数组就可以了

模块懒加载分析

1、在根routing.module中设置懒加载模块

2、建立模块

3、设置routing.module，就是上面的user-route.ts

import { RouterModule } from '@angular/router';
import {Usermian} from './usermian/usermian';
import {UserinfoComponent} from './userinfo/userinfo';
import {Userother} from './userother/userother';
export const userroutes=[
  {
  path:'',
  component:Usermian,//表示默认输出该模块，后面的为整个的其他的页面
  children:[
    {
      path:'',
      redirectTo:'user',
      pathMatch:'full'
    },
    {
      path:'userinfo',
      component:UserinfoComponent
    },
    {
      path:'userother',
      component:Userother
    }
  ]
}
]

4、设置user.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';   引入路由模块
import { Usermian } from './usermian/usermian';
import { UserinfoComponent } from './userinfo/userinfo';
import { Userother } from './userother/userother';
import {userroutes} from "./user-route";
//模块有自己的routes在module中用forChild 引入一下
@NgModule({
  declarations:[
    Usermian,                        这里导入用组件访问设置path的组件名，用link链接的就不用了
    UserinfoComponent,
    Userother

  ],
  imports: [
    RouterModule.forChild(userroutes) 引入自己设置的userroutes模块
  ],exports: [
    Usermian
  ]
})
export class UserModule { }

5、补充

由于设置的主要路径是在usermian里面所以在里面设置routerLink和显示  usermian.ts如下

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-usermin',
  template:`<div>
                <a routerLink="userinfo">用户信息</a>
                <a routerLink="userother">其他</a>
            </div>
            <div>
                <router-outlet></router-outlet>
            </div>
            
            `
})
export class Usermian implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

6、最终效果

    this.router.navigate(['/child-center'], { relativeTo: this.route})
1
1

    this.router.navigate(['../'], { id: 1, foo: 'foo' }, {relativeTo: this.route})
1
1

    this.router.navigateByUrl()