angular7 路由配置与获取路由参数

一、路由配置
routing文件
通过调用RouterModule.forRoot()方法来创建根路由模块，并将其导入到应用的根模块中

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {CallRecordListComponent} from './call-record-list/call-record-list.component';
import {CallRecordComponent} from './call-record/call-record.component';
const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'bill-o' },
    {
      path: 'bill-o', component: CallRecordListComponent,
    },
    {
      path: 'bill-o/:id', component: CallRecordComponent,
    },
  ]
;
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CallRecordsRoutingModule {
}

在html引入RouterOutlet指令，用于显示URL所对应的组件

<router-outlet></router-outlet>

二、路由使用
1.在html文件中使用

    <li class="nav-item" routerLinkActive="active">
      <a class="nav-link" routerLink="/manage/bill-o/123">点击跳转</a>
    </li>

2.在ts文件中使用

import {Router} from '@angular/router';
export class AuthService {
  constructor(private http: HttpClient,
              private cookie: CookieService,
              public router: Router) {
  }
  foo(){
    this.router.navigate(['/manage/bill-o/123'], {
                queryParams: {
                  id: 123,
                  type: 'suibian'
                }
        })
  }
}

三、获取路由参数
1.导入相应的模块

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

2.注入相应的服务

  constructor(private route: ActivatedRoute) {}

3.获取参数

  vertexId: any;
  constructor(private service: GenealogyService,
              private route: ActivatedRoute) {
    this.route.queryParams.subscribe(queryParams => {
      this.vertexId = queryParams.id;
    });
  }