[JavaScript知识库]Angular 路由

概念

在单页应用中，可以通过显示或隐藏与特定组件相对应的部分来更改用户看到的内容，而不用去服务器获取新页面。用户执行应用程序任务时，他们需要在定义好的不同视图之间移动。

要处理从一个视图到下一个视图的导航，需要使用 Angular Router。 Router 会通过将浏览器 URL 解释为更改视图的操作指令来启用导航。
官方文档

基本配置

1. 创建2个组件：ng g c route-study/crisis-list ; ng g c route-study/hero-list

2. 在app.moudle.ts中配置路由：
   

3. 在app.component.html中设置路由：

<h3>Route Study</h3>
<div>
    <!-- routerLink定义路由;  routerLinkActive 设置当前路由添加样式类-->
    <a routerLink="/heros" routerLinkActive="active">heros</a> |
    <a routerLink="/crisis" routerLinkActive="active">crisis</a>
    <!-- 定义路由切换组件填充的位置 -->
    <router-outlet></router-outlet>
</div>

配置路由模块

大型项目如果将路由到放在app.module.ts中会导致文件很大，因此可以按模块划分路由。

1. 创建2个模块：ng g m route-study/hero --routing ； ng g m route-study/crisis --routing
2. 将根模块中 定义的 heros 和 crisis 路由分别抽取到 hero 和crisis模块的路由中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroListComponent } from './hero-list/hero-list.component';


const routes: Routes = [
  { path: "heros", component: HeroListComponent }
];

@NgModule({
  // 子路由中注册路由使用的RouterModule.forChild(routes)
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HeroRoutingModule { }

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CrisisListComponent } from './crisis-list/crisis-list.component';


const routes: Routes = [
  { path: "crisis", component: CrisisListComponent }
];

@NgModule({
  // 子路由中注册路由使用的RouterModule.forChild(routes)
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CrisisRoutingModule { }

3. 默认路由提取到根路由文件中 app-routing.module.ts：

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


const routes: Routes = [
  // 没有路由时默认跳转到heros
  { path: "", redirectTo: "heros", pathMatch: "full"},
  // 通配符路由，上面的路由都匹配不到时默认跳转到heros
  { path: "**", redirectTo: "heros"},
];

@NgModule({
  // 根路由中注册路由使用的RouterModule.forRoot(routes)
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 在app.module.ts中引入两个子模块：

@NgModule({
  declarations: [
	...
  ],
  imports: [
    BrowserModule,
    // 子模块需要在AppRoutingModule之前引入，
    // 否则会导致AppRoutingModule中配置的通配符匹配所有路由
    HeroModule,
    CrisisModule,
    AppRoutingModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})