angular 路由学习

angular router

src/app/app.module.ts 路由配置

• 注意：path 不能以斜杠（/）开头
• 重定向路由需要一个 pathMatch 属性 把 pathMatch 设置为 full

• ** 路径是一个通配符 ,404页面
• 如果你想要看到在导航的生命周期中发生过哪些事件，可以使用路由器默认配置中的 enableTracing 选项。它会把每个导航生命周期中的事件输出到浏览器的控制台。 这应该只用于调试。

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
// import ... 引入组件内容
const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];
@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot( appRoutes,  { enableTracing:  true  }
   // other imports here
  ],
})
export class AppModule {
}

路由出口

类似vue中<router-view></router-view>

<router-outlet></router-outlet>

路由器链接

• 精确匹配[routerLinkActiveOptions] ="{exact:true}"
• routerLinkActive 激活状态会添加active类

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active"  [routerLinkActiveOptions] ="{exact:true}">Heroes</a>

配置动态链接

<a [routerLink]="['/hero', hero.id]" routerLinkActive="active">Heroes</a>

• 加载路由库
• 往壳组件的模板中添加一个导航条，导航条中有一些 A 标签、routerLink 指令和 routerLinkActive 指令
• 往壳组件的模板中添加一个 router-outlet 指令，视图将会被显示在那里
• 用 RouterModule.forRoot() 配置路由器模块
• 设置路由器，使其合成 HTML5 模式的浏览器 URL
• 使用通配符路由来处理无效路由
• 当应用在空路径下启动时，导航到默认路由

路由模块

ng generate module heroes --routing

• 快速生成heroes-routing.module.ts和heroes.module.ts
• 将heroes.module引入到app.module中的imports里边

src/app/heroes
----hero-detail
-------hero-detail.component.css
-------hero-detail.component.html
-------hero-detail.component.ts
----hero-list
----- ...
----heroes-routing.module.ts
----heroes.module.ts

路由传参

html中跳转

//'product/123'
<button [routerLink]="['/product',123]" >详情</button> 
<button [routerLink]="['/product/123']" >详情</button>
 
//'product/123?test=test'
<button [routerLink]="['/product',123]" [queryParams]="{'test':'test'}">详情</button> 

// 用“;”分隔的。 这是`矩阵 URL标记法`
<a [routerLink]="['/test',{id:12}]"> localhost:4200/wechat;id=12 </a>

编程式导航

constructor(
   private router:Router  //注入路由服务
) { }

this.router.navigate(['/product','id123'],{queryParams:{'test':'1235464'}})
 //wechat
this.router.navigate(['wechat']); 

//原路由没有配置接收参数的情况可以如下传参数
//  http://localhost:4200/wechat;id=11
this.router.navigate(['wechat',{id:11}])

接收路由参数

接收参数

• 组件只渲染一次的时候可以直接用快照方法Snapshot（快照）
this.route.snapshot.paramMap.get('id')
• 如果有可能连续多次导航到此组件;应该用ActivatedRoute服务的paramMap属性,paramMap是一个 Observable对象,每次路由变化,都会emit一个(params: ParamMap)对象,然后用params.get('id')来获取最新的id

import {ActivatedRoute, ParamMap, Router} from '@angular/router';
  constructor(
    //服务注入
    public route: ActivatedRoute,
  ) {
  }
  ngOnInit() {
    //快照方法
    // this.id = this.route.snapshot.paramMap.get('id');

    //params参数变化会跟新最新的id   获取到paramMap结构
     this.route.paramMap.subscribe(params=>{
        console.log(params.get('id'))
      })
     //获取纯对象
      this.route.params.subscribe(params=>{
        console.log(params.id)
      })
      /*
      *  获取查询参数
      */
       //获取纯对象
      this.route.queryParams.subscribe(params=>{
        console.log(params.test)
      })
      this.route.queryParamMap.subscribe(params=>{
        console.log(params.get('test'))
      })
  }
}