第六章 路由

1 首先angul-cli中配置的时候选yes，就是默认配置自己配置路由

2 配置好后，app.html中会有

这个相当于vue中的router-view

3 配置一级路由

在app.routing中

引入
import { NewsComponent } from './component/news/news.component';
import { AboutComponent } from './component/about/about.component';
import { HomeComponent } from './component/home/home.component';

配置
{
    path:'home',
    component: HomeComponent
  },{
    path:'news',
    component:NewsComponent 
  },{
    path:"about",
    component:AboutComponent
}

3 输入地址404

import { ErrorComponent } from './component/error/error.component';
配置
,{
          path:'**',
          // 匹配没有设置的路由
          component: ErrorComponent
  },

效果 随意输入一个没有配置的地址

4 路由重定向

 {
    path:"",
    redirectTo:"home",
    pathMatch:'full'
  }

5 routerLinkActive选中默认选中的路由

<ul>
  <li><a [routerLink]="['/home']" routerLinkActive="router-link-active">home</a></li>
  <li> <a [routerLink]="['/about']" routerLinkActive="router-link-active">about</a></li>
  <li> <a [routerLink]="['/news']" routerLinkActive="router-link-active">news</a></li>
</ul>
css样式
.router-link-active{
    color:red;
}

6 跳转到详情页 get传值

跳转

<a [routerLink]="['/detail']" [queryParams]='{id:id}' >跳转到detail</a>
首先要定义id 在主页面的ts
export class HomeComponent implements OnInit {
  public id:string="123"
  constructor() { 
  }

接收
detail.ts this.route.queryParams

导入
import {ActivatedRoute} from '@angular/router'
构造函数中配置
  constructor(public route:ActivatedRoute) { }
使用
  ngOnInit() {
    this.route.queryParams.subscribe(res=>{
      console.log(res['id'])
    })
  }

7 动态路由

配置动态路由

import { DetailComponent } from './component/detail/detail.component';
{
     path:"detail/:id",
     component: DetailComponent
  },

跳转
第一种方式

<a [routerLink]="['/detail',id]" >跳转到detail</a>

第二种方式

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

接收

导入
import {ActivatedRoute} from '@angular/router'
构造函数中配置
  constructor(public route:ActivatedRoute) { }
使用
 ngOnInit() {
    this.route.params.subscribe(res=>{
      console.log(res['id'])
    })
  }

8 动态路由的事件跳转

this.router.navigate([‘/detail’])

<button (click)="handleClick()">跳转到detail</button>
导入
import {Router} from '@angular/router'
构造函数中配置
constructor(private router:Router) { 
  }
使用
handleClick(){
    this.router.navigate(['/detail'])
  }
传id
handleClick(){
    this.router.navigate(['/detail',this.id])
  }

接收

导入
import {ActivatedRoute} from '@angular/router'
构造函数中配置
  constructor(public route:ActivatedRoute) { }
使用
 ngOnInit() {
    this.route.params.subscribe(res=>{
      console.log(res['id'])
    })
  }

9 get传值的事件跳转

导入
import {Router,NavigationExtras} from '@angular/router'
构造函数中配置
constructor(private router:Router) { 
  }
使用 
handleClick(){
    let navigationExtras:NavigationExtras={
      queryParams:{
        "id":"1234"
      }
    }
    this.router.navigate(['/detail'],navigationExtras)
  }
传不固定的值
export class HomeComponent implements OnInit {
  public id:string="123"
  constructor(private router:Router) { 
  }
  handleClick(){
    let navigationExtras:NavigationExtras={
      queryParams:{
        "id":this.id  tips
      }
    }
    this.router.navigate(['/detail'],navigationExtras)
  }

接收

  导入
import {ActivatedRoute} from '@angular/router'
构造函数中配置
  constructor(public route:ActivatedRoute) { }
ngOnInit() {
    this.route.queryParams.subscribe(res=>{
      console.log(res['id'])
    })
  }

子路由

import { MorningComponent } from './component/morning/morning.component';
import { NightComponent } from './component/night/night.component';
配置
{
    path:'news',
    component:NewsComponent ,
    children:[
        {
          path:"morning",
          component:MorningComponent
        },{
          path:'night',
          component: NightComponent
        },{
          path:"",
          redirectTo:"morning",
          pathMatch:"full"
        }
      // 路由重定向
    ]
  },
    tips
   # <router-outlet></router-outlet>   一定要在父路由对应的组件中的html中加这个