Angular8 路由使用Router

一、文件结构

1.1 文件分析

1.2 模块视图

1.3 实例效果

二、生成路由文件

2.1创建带路由的模块

ng g component modules/components/plan
ng g module modules/components/plan --routing

2.2所有路由地址

2.3app路由模块

ng generate module app-routing --flat --module=app

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

三、导出RouterModule

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

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

四、添加路由定义

1. path：一个用于匹配浏览器地址栏中URL的字符串。
2. component：当导航到此路由时，路由应该创建哪个组件。
   app-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AutherticationGuardService } from './core/services/authertication-guard.service';

const routes: Routes = [
  {
    path: 'login',
    loadChildren: './modules/login/login.module#LoginModule'
  },
  {
    path: 'plan',
    loadChildren: './modules/plan/plan.module#PlanModule',
    canLoad: [AutherticationGuardService],
    canActivate: [AutherticationGuardService],
    canActivateChild: [AutherticationGuardService],
    canDeactivate: [AutherticationGuardService],
  },
  {
    path: 'design',
    loadChildren: './modules/design/design.module#DesignModule'
  },
  {
    path: 'execution',
    loadChildren: './modules/execution/execution.module#ExecutionModule'
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'plan/plan-home/procedure-list',
  }
];
plan-routing.module.ts

```javascript
const routes: Routes = [
  {
    path: 'plan-home',
    component: PlanComponent,
    children: [
      {
        path: 'procedure-list',
        loadChildren: './modules/procedure-list/procedure-list.module#ProcedureListModule',
      },
      {
        path: 'procedure-details',
        loadChildren: './modules/procedure-details/procedure-details.module#ProcedureDetailsModule',
      },
      {
        path: 'entity-list',
        loadChildren: './modules/entity-list/entity-list.module#EntityListModule',
      },
      {
        path: 'policy-coverage',
        loadChildren: './modules/policy-coverage/policy-coverage.module#PolicyCoverageModule',
      },
      {
        path: 'regulatory-coverage',
        loadChildren: './modules/regulatory-coverage/regulatory-coverage.module#RegulatoryCoverageModule',
      }
    ]
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'plan-home/procedure-list'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PlanRoutingModule { }

procedure-details-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProcedureDetailsComponent } from './procedure-details.component';


const routes: Routes = [
  {
    path: 'details-home',
    component: ProcedureDetailsComponent,
    children: [
      {
        path: 'plan',
        // loadChildren: './modules/details-plan/details-plan.module#DetailsPlanModule',
        loadChildren: () => import('./modules/details-plan/details-plan.module').then(m => m.DetailsPlanModule),
      },
      {
        path: 'design',
        // loadChildren: './modules/details-design/details-design.module#DetailsDesignModule',
        loadChildren: () => import('./modules/details-design/details-design.module').then(m => m.DetailsDesignModule),
      },
      {
        path: 'execution',
        // loadChildren: './modules/details-execution/details-execution.module#DetailsExecutionModule',
        loadChildren: () => import('./modules/details-execution/details-execution.module').then(m => m.DetailsExecutionModule),

      }
    ]
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'details-home/plan'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProcedureDetailsRoutingModule { }

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes, { useHash: true })
  ],
  exports: [RouterModule],
  providers: [AutherticationGuardService]
})
export class AppRoutingModule { }
注：查看app.module.ts文件中是否有引入AppRoutingModule。
import { AppRoutingModule } from './app-routing/app-routing.module';
imports: [
    AppRoutingModule
  ],

五、添加路由出口

<router-outlet></router-outlet>  

六、运行项目

ng serve

七、添加默认路由

1. 方法一：当启动项目时，浏览器的地址栏指向的是网站的根路径。它没有匹配到任何现存路由，因此路由器也不会导航到任何地方。

{
    path: '',
    pathMatch: 'full',
    redirectTo: 'plan/plan-home/procedure-list',
  }

2. **路径是一个通配符，表示除了以上几种path,任何的路径都会加载该路由，这个记得写在路由配置最后。

{
    path: '**',
    pathMatch: 'full',
    redirectTo: 'plan/plan-home/procedure-list',
  }

八、添加路由链接router

routerLinkActive：当前激活路由选中样式
routerLink:路由链接

<ul class="nav navbar-nav">
  <li title="plan" >
    <a routerLink="/plan/plan-home/procedure-details/details-home/plan">
      <span [routerLinkActive]="['active']">plan</span>
    </a>
  </li>
  <li title="design">
    <a routerLink="/plan/plan-home/procedure-details/details-home/design/{{id}}">
      <span [routerLinkActive]="['active']">design</span>
    </a>
    <a [routerLink]="['/plan/plan-home/procedure-details/details-home/design', id]">
      <span [routerLinkActive]="['active']">plan</span>
    </a>
  </li>
  <li title="execution">
    <a routerLink="/plan/plan-home/procedure-details/details-home/execution">
      <span [routerLinkActive]="['active']">execution</span>
    </a>
  </li>
</ul>

九、路由添加参数

然后把一个参数化路由添加到 AppRoutingModule.routes 数组中，它要匹配指向文章详情视图的路径。

 {
        path: 'design/:id',
        loadChildren: () => import('./modules/details-design/details-design.module').then(m => m.DetailsDesignModule),
      },

path 中的冒号（:）表示 :id 是一个占位符，它表示某个特定数据。
然后，我们需要修改HTML页面中的文章列表跳转链接

<li title="design">
    <a routerLink="/plan/plan-home/procedure-details/details-home/design/{{id}}">
      <span [routerLinkActive]="['active']">design参数 &nbsp;&nbsp;&nbsp;&nbsp;</span>
    </a>

    <a [routerLink]="['/plan/plan-home/procedure-details/details-home/design', id]">
      <span [routerLinkActive]="['active']">design参数</span>
    </a>
  </li>

十、路由跳转

先添加下列导入语句：

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

然后把 ActivatedRoute注入到构造函数中，将它们的值保存到私有变量里

  constructor(private router: Router) { }

1. 无参数跳转

 this.router.navigate(['/plan/plan-home/procedure-list']);

2. 有参数跳转
   单个参数

this.router.navigate(['/plan/plan-home/procedure-details/details-home/design', this.id]);

多个参数

this.router.navigate(['/plan/plan-home'], {queryParams: { productId: '1', title: 'moon' }});

相对路径

 this.router.navigate(['../../../plan/plan-home/procedure-list']);

绝对路径

this.router.navigateByUrl('/plan/plan-home/procedure-list');

绝对错误路径

 this.router.navigateByUrl('../../../plan/plan-home/procedure-list'); // error, no any match

跳转效果：

十一、获取路由参数

1. 先添加下列导入语句：

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

2. 然后把 ActivatedRoute注入到构造函数中，将它们的值保存到私有变量里

constructor(
  private route: ActivatedRoute,
) {}

3. 获取路由参数（当前路由页获取路由参数）
   方法一、

  constructor(private route: ActivatedRoute) {
    this.route.params.subscribe(
      params => {
        console.log(params);
      }
    );
  
  }

方法二、

 constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe(queryParams => {
      console.log(queryParams.productId);
      console.log(queryParams.title);
    });
   }

方法三、

  console.log(this.route.snapshot.paramMap.get('id'));
  console.log(this.route.snapshot.params['id']);

获取路由参数效果图：

十二、返回上一级

1. 先添加下列导入语句

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

2. 然后把 Location 服务注入到构造函数中，将它们的值保存到私有变量里

 constructor(private location: Location) {}

3. 点击返回页面
   html

<button (click)="goBack()">返回到上一个</button>&nbsp;&nbsp;&nbsp;&nbsp;

ts

 goBack() {
    this.location.back();
  }

通过点击浏览器的后退按钮，可以回到上一个也买你进入的页面。另外服务Location在浏览器的历史栈中后退一步。

十三、GitHub地址

路由嵌套github地址

十四、学习参考

路由配置
Angular官网