angular路由基础知识

常见的路由导航

Routes | 路由配置

app-routing.ts

const routes: Routes = [
  //默认初始显示页面，重定向路由，重定向redirectTo到demo页面
  { path: '', redirectTo: '/demo', pathMatch: 'full' },
  
  //辅助路由,extraName是路由插座的名字，自己定义
  {path:'extra',component: ExtraComponent,outlet:'extraName'}
  
  
  //不带参数路径,子路由
  { path: 'demo', component: DemoComponent ,
    children:[
    { path:'child-one',component: ChileOneComponent},
    { path:'child-two',component: ChileTwoComponent},
    
    // 子业务模块路由，子模块具体路由path存在在子模块的routing中
    { path: 'sys', loadChildren: './sys/sys.module#SysModule' }
    ]
  },
  
  //不带参数路径
  { path: 'demo1', component: Demo1Component },
  
  //带参数路径，id为参数
  { path: 'demo2/:id', component: Demo2Component },
  
  
  //通配符路由，页面不存在路由
  { path: '**', component: 404Component}
];

RouterOutlet | 路由占位符

<!--在html中控制组件显示的位置-->
<router-outlet></router-outlet>

<!--辅助路由插座-->
<router-outlet name="extraName"></router-outlet>

Router | 执行路由对象

//在ts执行路由导航，使用navigate()方法
import { Router } from '@angular/router';

...
constructor(private router: Router){}
...

this.router.navigate(['/demo']);

返回上级路由

import { Location } from '@angular/common';
...

constructor(private location: Location){}

...

this.location.back();

RouterLink | html中声明路由导航

<!--辅助路由显示-->
<a [routerLink]="[{ outlets: { extraName: 'extra'} }]">打开辅助路由</a>
<a [routerLink]="[{ outlets: { primary：'demo',extraName: 'extra'} }]">打开辅助路由,同时显示demo主界面</a>
<a [routerLink]="[{ outlets: { extraName: 'extra'} }]">关闭辅助路由</a>


<!--不传参数路由-->
<a routerLink="/demo" routerLinkActive="active">组件A</a>
<a [routerLink]="/demo">组件A</a>

<!--不带参数的路径，通过queryParams传递参数-->
<a [routerLink]="['/demo1']" [queryParams]="{id: 001}">组件A1</a>

<!--带参数的路径，直接传递参数-->
<a [routerLink]="['/demo2',002]">组件A1</a>

在组件页面接收路由传递的参数

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

...

constructor( private route: ActivatedRoute ){}

...


//不带参数路径获取传递的参数，下面两种方法均可获取传递的id
let id1 = this.route.snapshot.queryParams['id'];
let id1 = this.route.snapshot.queryParamMap.get('id');

//带参数路径获取传递的参数，下面两种方法均可获取传递的id
let id2 = this.route.snapshot.paramMap.get('id');
let id2 = this.route.snapshot.params['id'];

snapshot参数快照 | .subscribe参数订阅

snapshot参数快照 subscribe参数订阅
当组件可能从自身路由到自身时，推荐使用参数订阅，避免组件ngOnInit()不创建时，也能实时更新传递的参数。
注意：使用subscribe时要导入Params模块

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

this.route.params.subscribe((params: Params) => this.id = params['id'])