Angular8 路由使用Router
这里写目录标题
- 一、文件结构
-
- 1.1 文件分析
- 1.2 模块视图
- 1.3 实例效果
- 二、生成路由文件
-
- 2.1创建带路由的模块
- 2.2所有路由地址
- 2.3app路由模块
- 三、导出RouterModule
- 四、添加路由定义
- 五、添加路由出口
- 六、运行项目
- 七、添加默认路由
- 八、添加路由链接router
- 九、路由添加参数
- 十、路由跳转
- 十一、获取路由参数
- 十二、返回上一级
- 十三、GitHub地址
- 十四、学习参考
一、文件结构
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 {
}
四、添加路由定义
- path：一个用于匹配浏览器地址栏中URL的字符串。
- 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
七、添加默认路由
- 方法一：当启动项目时，浏览器的地址栏指向的是网站的根路径。它没有匹配到任何现存路由，因此路由器也不会导航到任何地方。
{
path: '',
pathMatch: 'full',
redirectTo: 'plan/plan-home/procedure-list',
}
- **路径是一个通配符，表示除了以上几种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参数 </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) {
}
- 无参数跳转
this.router.navigate(['/plan/plan-home/procedure-list']);
- 有参数跳转
单个参数
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
跳转效果：
十一、获取路由参数
- 先添加下列导入语句：
import {
ActivatedRoute } from '@angular/router';
- 然后把 ActivatedRoute注入到构造函数中，将它们的值保存到私有变量里
constructor(
private route: ActivatedRoute,
) {
}
- 获取路由参数（当前路由页获取路由参数）
方法一、
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']);
获取路由参数效果图：
十二、返回上一级
- 先添加下列导入语句
import {
Location } from '@angular/common';
- 然后把 Location 服务注入到构造函数中，将它们的值保存到私有变量里
constructor(private location: Location) {
}
- 点击返回页面
html
<button (click)="goBack()">返回到上一个</button>
ts
goBack() {
this.location.back();
}
通过点击浏览器的后退按钮，可以回到上一个也买你进入的页面。另外服务Location在浏览器的历史栈中后退一步。
十三、GitHub地址
路由嵌套github地址
十四、学习参考
路由配置
Angular官网