Angular笔记_8

路由

路由，本质上是一种切换视图的机制。

Angular 一般表现为单页面程序，路由的路径只不过是一种保持状态的机制，并不纯在于后台。

通过切换不同的路径，将视图替换到路由插座上 <router-outlet></router-outlet>以达到页面的切换。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestComponent, Test2Component } from '../components';
// 路由按照顺序匹配，核心是循环数组进行匹配
const routes: Routes = [{path: '', // 路径redirectTo: 'test', // 跳转pathMatch: 'full', // 表示 path 为 '' 会被重定向到 test // 另一参数 prefix, 如果 path 为 'abc' 则 /abc 以及其子路由 /abc/xxx 都会跳转到 test},{path: 'test', // 路径component: TestComponent, // 路由对应的组件children: [ // 子路由数组{path: ':test2',component: Test2Component,},],},
];@NgModule({ // forRoot 创建一个包含所有指令，给定路由和路由器服务本身的模块 （定义根路由，用于 app.module）// forChild 会创建一个模块，其中包含所有指令和给定的路由，但不包括路由器服务。（功能路由，用于功能模块）imports: [RouterModule.forChild(routes, { enableTracing: true })], // 是否可追踪 enableTracingexports: [RouterModule],
})
export class TestRoutingModule {}

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TestRoutingModule } from './test/test-routing.module';const routes: Routes = [];@NgModule({imports: [RouterModule.forRoot(routes), TestRoutingModule], // 引入路由文件exports: [RouterModule],
})
export class AppRoutingModule {}

<!-- app.app.component.html 写入路由插座 -->
<router-outlet></router-outlet>

Router

完整子路由配置

// home.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { Page1Component, Page2Component } from '../components';
import { HomeModuleComponent } from './home-module.component';const routes: Routes = [{path: '', // 配置懒加载可以不写 pathcomponent: HomeModuleComponent, // 父级路由主键children: [{path: 'page1', // 子页面1component: Page1Component, // 导入组件},{path: 'page2', // 子页面2component: Page2Component, // 导入组件},],},
];export const HomeRoutes = RouterModule.forChild(routes); // 加入路由

// home-module.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeModuleComponent } from './home-module.component';
import { HomeRoutes } from './home.routing';@NgModule({imports: [CommonModule, HomeRoutes], // 将路由导入模块，如不导入将无法使用 router 相关命令declarations: [HomeModuleComponent],exports: [HomeModuleComponent],
})
export class HomeModuleModule {}

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeRoutes } from './home-module/home.routing';const routes: Routes = [];@NgModule({imports: [RouterModule.forRoot(routes), HomeRoutes], // 导入路由exports: [RouterModule],
})
export class AppRoutingModule {}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
// import { RouterModule } from '@angular/router';@NgModule({declarations: [AppComponent],imports: [BrowserModule,AppRoutingModule,RouterModule.forRoot([ // 使用 RouterModule 配置{path: 'home', // 模块路径loadChildren: () =>import('./home-module').then((mod) => mod.HomeModuleModule),// 通过配置 loadChildren，在请求 /home 加载 HomeModuleModule 模块// 另一写法 './home-module#HomeModuleModule' 已经废弃},]),// HomeModuleModule, // 采用懒加载的模式 不用直接导入],providers: [],bootstrap: [AppComponent],
})
export class AppModule {}

<!-- home-module.component.html -->
<p>Home</p>
<a [routerLink]="[ './page1' ]">page1</a> <!-- 切换到 page1 -->
<!-- 如果第一个片段用 / 开头，则路由器会从应用的根路由开始查找。如果第一个片段用 ./ 开头或者没有用斜杠开头，路由器就会从当前激活路由开始查找。如果第一段以 ../ 开头，则路由器将去往路由树中的上一层。
-->
<a [routerLink]="[ '/home/page2' ]">page2</a>
<router-outlet></router-outlet> 
<!-- 用于显示子路由页面 -->

<!-- app.component.html -->
<p>App</p>
<router-outlet></router-outlet> 
<!-- 用于显示路由页面 -->

路由参数

配置

const routes: Routes = [{...{path: 'page1/:id',  // 其中 :id 是一个变量，可为任意名称component: Page1Component,},{path: 'page2/:id',component: Page2Component,},...},
];

使用

<a [routerLink]="[ './page1', 123 ]" [queryParams]="{ username: 'test' }" routerLinkActive="active">page1</a>
<!-- routerLinkActive 当前路由设置样式 .active {background-color: blue;}
-->
<button (click)="toPage2()">toPage2</button><script lang="ts">
import { Router } from '@angular/router';...constructor(private route: Router) {} // 导入 routertoPage2(): void {this.route.navigate(['/home/page2', 456], {queryParams: {username: 'test2',},});  }
</script>

route.navigate

URL

.../page1/123?username=test

.../page2/456?username=test2

读取

import { ActivatedRoute } from '@angular/router';
...constructor(private activatedRoute: ActivatedRoute) {} // 导入 ActivatedRoute: 激活的路由ngOnInit(): void {console.log(this.activatedRoute.snapshot.queryParams.username); // 123/456console.log(this.activatedRoute.snapshot.paramMap.get('id')); // test/test2}

ActivatedRoute

同一页面使用多个<router-outlet></router-outlet>

配置

<!--* @Descripttion: * @version: * @Author: Munan* @Date: 2021-03-28 10:03:54* @LastEditors: Munan* @LastEditTime: 2021-03-28 17:00:21
-->
<p>{{ title }}-module works!
</p>
<a [routerLink]="[ './page1', 123 ]" [queryParams]="{ username: 'test' }" routerLinkActive="active">page1</a>
<button (click)="toPage2()">toPage2</button>
<a [routerLink]="[{ outlets: { other: ['page3'] } }]">page3</a>
<!-- [{ outlets: { other: ['page3'] } }] 配置 outlets other 对应 router-outlet 的 namepage3 是页面路径
-->
<router-outlet></router-outlet>
<router-outlet name="other"></router-outlet>
<!-- 无 name 属性的 router-outlet 只能有一个有 name 属性可以有多个
-->

{path: 'page3',component: Page3Component,outlet: 'other', // router-outlet 名称
},

URL

.../home/(page1/123//other2:page4//other:page3)?username=test

不同的 router-outlet 会被 // 分割

备注

不推荐使用多个 router-outlet，不好维护，url阅读性差，直接使用嵌套模块的方式即可