第七章 路由

1. 为什么需要路由

• 需要直接到达某个页面

在Angular中，HTML5路由是默认的模式

2. Angular 路由的组成部件

• Routes：描述了应用程序支持的路由配置。
• RouterLink指令：用于创建各种路由链接。
• RouterOutlet：这是一个“占位符”组件，用于告诉Angular要把每个路由的内容放在哪里。

2.1 Routes 路由配置 【在app.module.ts中的配置】

2.1.1 import RouterModule， Routes

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

2.1.2 建立路由表

const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent },
{ path: 'contactus', redirectTo: 'contact' },
];

参数说明

• path：指定了该路由要处理的URL路径。
• component：用于连接当前路由路径与处理该路由的组件。
• redirectTo：一个可选选项，用于将当前路径重定向到另一个已知路由。

2.1.3 NgModule 配置

@NgModule({
  //...
  imports: [
    RouterModule.forRoot(routes)
  ],
  //....
})

2.2 RouterLink指令：进入路由链接 [不重载页面]

两种写法

• [routerLink]="[‘about’]"
• routerLink=“about”

<li>
    <ul [routerLink]="['about']"> about</ul>
    <ul [routerLink]="['contact']"> contact</ul>
    <ul routerLink="contactus"> contactus</ul>
</li>

2.3 RouterOutlet：这是一个“占位符”组件，路由的内容

<router-outlet></router-outlet>

<div>
  <p> routes test</p>
  <li>
    <ul [routerLink]="['about']"> about</ul>
    <ul [routerLink]="['contact']"> contact</ul>
    <ul routerLink="contactus"> contactus</ul>
  </li>
  <router-outlet></router-outlet>
</div>

3. 路由策略

默认情况(html5路由)下 url: http://localhost:4200/about
设置后, url: http://localhost:4200/#/about

import {LocationStrategy, HashLocationStrategy} from '@angular/common';

@NgModule({
  //...
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 路由参数: 批量的URL

4.1 设定路由表

const rout:Routes = [
  {path:"titles", component:TitlesComponent},
  {path:"title/:id", component:TitleDetailComponent},
];

4.2 构建父组件TitlesComponent， 设定routelink

titles.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-titles',
  templateUrl: './titles.component.html',
  styleUrls: ['./titles.component.scss']
})
export class TitlesComponent implements OnInit {
  titles:number[] = [1,2,3,4,5];
  constructor() { }

  ngOnInit() {
  }

}

titles.component.html

<p>
  titles works!
</p>

<div *ngFor="let item of titles">
  <a routerLink="/title/{{item}}"> {{ item }}</a>
</div>

4.3 构建子组件TitleDetailComponent， 构造函数

title-detail.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-title-detail',
  templateUrl: './title-detail.component.html',
  styleUrls: ['./title-detail.component.scss']
})
export class TitleDetailComponent implements OnInit {
  @Input() index:number;
  // 比较重要
  constructor(private route: ActivatedRoute) {
    route.params.subscribe(params => { this.index = params['id']; });
   }

  ngOnInit() {
  }

}

title-detail.component.html

<p>
  title: {{index}}
</p>

5. 路由器钩子（CanActivate ）

5.1 Guard定义

守卫： 满足什么条件下放行

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthServiceService } from '../AuthService.service';
@Injectable()
export class LoggedInGuard implements CanActivate {
  constructor(private authService: AuthServiceService) {}
  canActivate(): boolean {
    return this.authService.isLoggedIn();
  }
}

5.2 Guard放置

const rout:Routes = [
  //....
  {path:"protected", component:ProtectedComponent, canActivate:[LoggedInGuard]}
];

6. 嵌套路由

6.1 子路由定义

file: about.component.ts

export const childRoutes:Routes = [
  {path:"contract", component: ContractComponent},
  {path:"else", component: ElseComponent},
];

6.2 子路由放置

file: app.module.ts

const rout:Routes = [
  {path:"about", component: AboutComponent , children: childRoutes},
  // ...
];

知识点

• 单页Web应用 single page web application，SPA
• 锚点定位会重载页面，而routerlink不会重载页面
  • <a href="/#/home">Home</a> 点击这个链接将触发页面重载