路由所要解决的核心问题是通过建立URL和页面的对应关系，使得不同的页面可以用不同的URL来表示

路由配置

app.routes.ts

1
2
3
4
5
6
7
import { Routes } from '@angular/router'
import { PipeComponent } from './pipe/pipe.component'
export const rootRouterConfig: Routes = [
  { path: 'pipe', component: PipeComponent },
]

创建跟路由模块

app.module.ts

1
2
3
4
5
6
7
8
9
10
11
import { ModuleWithProviders } from '@angular/core'
import { RouterModule } from '@angular/router'
import { rootRouterConfig } from './app.routes'
let rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig)
@NgModule({
  import: [
    rootRouterModule
  ]
})
export class AppModule { }

  • 在index.html中设置
  • <base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。
    在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。

添加

app.component.html

1
<router-outlet>

路由跳转

使用指令跳转

app.component.html

1
<button class="btn" [routerLink]="['/form']" routerLinkActive='active'>Form</button>

app.component.css

1
2
3
.active {
    background: #3DD689;
}

  • 使用[routerLink]=”[‘/form’]”指令进行路由跳转
  • 当routerLink被激活时，通过routerLinkActive指令为响应的HTML元素指定CSS类。
  • routerLinkActive作用于祖先元素，当该祖先元素下的任意routerLink处于激活状态该祖先元素都将获得routerLinkActive指定的CSS类

使用代码跳转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private _router: Router) {
    setTimeout(() => {
      _router.navigateByUrl('/form', { skipLocationChange: true })
      // _router.navigate(['/form'])
    }, 1000)
  }
}
  • skipLocationChange 在不改变URL的情况下实现路由跳转

路由参数

1
2
<a [routerLink]="['/detail/2']" [queryParams]="{limit:5}">路由参数</a>
<a [routerLink]="['/detail', 2]" [queryParams]="{limit:5}">路由参数</a>
  • [routerLink]指定跳转路径
  • [queryParams]指定query参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Component, OnInit, OnDestroy } from '@angular/core'
import { ActivatedRoute } from '@angular/router';
export class ContactDetialComponent implements OnInit, OnDestroy {
  private pathSub: any
  private querySub: any
  path: string
  query: string
  constructor(private _activedRoute: ActivatedRoute) { }
  ngOnInit() {
    this.pathSub = this._activedRoute.params.subscribe((params) => {
      this.path = params['id']
    })
    this.querySub = this._activedRoute.queryParams.subscribe((params) => {
      this.path = params['limit']
    })
  }
  ngOnDestroy() {
    // 避免内存泄漏
    this.pathSub.unsubscribe()
    this.querySub.unsubscribe()
  }
}