angular路由

1、用cli创建项目时添加路由

新增以下文件

//app.component.html
<router-outlet></router-outlet>
相当于<router-view></router-view>

2、创建组件

ng g component components/组件名
ng g component components/about

3、配置

一级路由、路由重定向、错误组件的处理

中文网址

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { AboutComponent } from './components/about/about.component';
import { ErrorComponent } from './components/error/error.component';
const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },{
    path:'news',
    component:NewsComponent
  },{
    path:'about',
    component:AboutComponent
  },{
    //路由重定向
    path:'',
    redirectTo:'home',
    pathMatch:'full'
  },{
    //匹配没有设置的路由
    path:"**",
    component:ErrorComponent
  }
];
...

4、路由导航

//app.component.html
<ul>
  <li><a [routerLink]="['/home']">home</a></li>
  <li><a [routerLink]="['/news']">news</a></li>
  <li><a [routerLink]="['/about']">about</a></li>
</ul>
<router-outlet></router-outlet>

routerLinkActive设置routerLink默认选中的路由的状态

//app.component.html
<ul>
  <li><a [routerLink]="['/home']" routerLinkActive="router-link-active">home</a></li>
  <li><a [routerLink]="['/news']" routerLinkActive="router-link-active">news</a></li>
  <li><a [routerLink]="['/about']" routerLinkActive="router-link-active">about</a></li>
</ul>
<router-outlet></router-outlet>

//app.component.css
.router-link-active{
    color:red;
}

5、跳转

配置路由

//app-routing.module.ts
import { DetailComponent } from './components/detail/detail.component';
const routes: Routes = [
  ...
  ,{
    path:'detail',
    component:DetailComponent
  },
  ...
];

不带参数跳转

//home
//.html
<a [routerLink]="['/detail']">跳转detail</a>

携带参数跳转(get传值)

//home
//.ts
export class HomeComponent implements OnInit {
  public id:string = "54561"
  constructor() { }
  ngOnInit() {
  }
}
//.html
<a [routerLink]="['/detail']" [queryParams]="{id:id}">跳转detail</a>

接收数据this.route.queryParams

//detail
//接收参数
//.ts
//导入正在显示的路由
import {ActivatedRoute} from '@angular/router'
export class DetailComponent implements OnInit {
    //构造函数中构建
  constructor(public route:ActivatedRoute) { }
  ngOnInit() {
    //subscribe触发
    this.route.queryParams.subscribe(res=>{
      console.log(res)
    })
  }
}
//{id: "54561"}

6、动态路由

配置动态路由

//app-routing.module.ts
import { DetailComponent } from './components/detail/detail.component';
const routes: Routes = [
  ...
  ,{
    path:'detail/:id',
    component:DetailComponent
  },
  ...
];

跳转传值

//home
//.ts
export class HomeComponent implements OnInit {
  public id:string = "54561"
  constructor() { }
  ngOnInit() {
  }
}

方法一

//home
//.html
<a [routerLink]="['/detail',id]">跳转detail</a>

方法二

<a routerLink="/detail/{{id}}">跳转detail</a>

接收this.route.params

//detail
//.ts
import {ActivatedRoute} from '@angular/router'
...
export class DetailComponent implements OnInit {
  constructor(public route:ActivatedRoute) { }
  ngOnInit() {
    this.route.params.subscribe(res=>{
      console.log(res)
    })
  }
}

7、事件跳转this.router.navigate

7-1、动态路由的事件跳转

//home
//.html
<button (click)="handleClick()">跳转detail</button>

//home
//.ts
import {Router} from "@angular/router"
export class HomeComponent implements OnInit {
  public id:string = "54561"
  constructor(private router:Router) { }
  ngOnInit() {
  }
  handleClick(){
    this.router.navigate(["/detail",this.id])
  }
}

//detail
//.ts
import {ActivatedRoute} from '@angular/router'
...
export class DetailComponent implements OnInit {
  constructor(public route:ActivatedRoute) { }
  ngOnInit() {
    this.route.queryParams.subscribe(res=>{
      console.log(res['id'])
    })
  }
}

7-2、get传值的事件跳转

//home
//.ts
//导入NavigationExtras
import {Router,NavigationExtras} from "@angular/router"
...
export class HomeComponent implements OnInit {
  constructor(private router:Router) { }
  ngOnInit() {
  }
  handleClick(){
    let navigationExtras:NavigationExtras = {
      queryParams:{
        "id":"12454"
      }
    }
    this.router.navigate(['/detail'],navigationExtras)
  }
}

//home
//.ts
import { Component, OnInit } from '@angular/core';
import {Router,NavigationExtras} from "@angular/router"
...
export class HomeComponent implements OnInit {
  constructor(private router:Router) { }
  public id:string = "15628"
  ngOnInit() {
  }
  handleClick(){
    let navigationExtras:NavigationExtras = {
      queryParams:{
        "id":this.id
      }
    }
    this.router.navigate(['/detail'],navigationExtras)
  }
}

//detail
//.ts
import {ActivatedRoute} from '@angular/router'
...
export class DetailComponent implements OnInit {
  constructor(public route:ActivatedRoute) { }
  ngOnInit() {
    this.route.queryParams.subscribe(res=>{
      console.log(res['id'])
    })
  }
}

9、子路由

配置子路由

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
...
import { MorningComponent } from './components/morning/morning.component'
import { NightComponent } from './components/night/night.component'
const routes: Routes = [
  ...
  ,{
    path:'news',
    component:NewsComponent,
    children:[
      {
        path:'morning',
        component:MorningComponent
      },{
        path:'night',
        component:NightComponent
      },{
        path:'',
        redirectTo:"morning",
        pathMatch:'full'
      }
    ]
  },
  ...
];
...

//news
//.html
<p>news works!</p>
<ul>
    <li><a [routerLink]="['/news/morning']" routerLinkActive="router-link-active">morning</a></li>
    <li><a [routerLink]="['/news/night']" routerLinkActive="router-link-active">night</a></li>
</ul>
<router-outlet></router-outlet>