Angular基础系列（七）--Angular路由解析

Angular从入门到放弃秘籍

第一篇Angular的介绍以及基本环境搭建

第二篇Angular模板语法、插值语法、事件绑定

第三篇Angular内置基本指令介绍

第四篇Angular组件的创建、组件声明周期钩子函数

第五篇Angular父子组件传值，父传子，子传父，组件之间

第六篇Angular请求数据

第七篇Angular路由介绍、两种路由传参

---

前言

这篇文章主要给大家介绍一下Angular中如何使用路由来实现不同页面之间的切换

一、普通的跳转

首先：我们要先在Angular中引入路由模块，在我们创建Angular项目时我们要选择路由模块，然后项目会产生一个app-module-routing.ts文件，我们需要把我们的所有注入的路由页面引入，并在route的数组中注册设置对应的path地址如下，这样我们的每一个路径都会有一个对应的组件展示。

//引入组件模块
import { NewsComponent } from './components/news/news.component';
import { HeadersComponent } from './components/headers/headers.component';

//在routes数组中定义对应的path和展示的组件名称
const routes: Routes = [
  {path:"home",component:HeadersComponent},
  {path:"new",component:NewsComponent}
];

//跳转，在app.component.html中使用
<a routerLink="home">home</a>
<a  routerLink="new">news</a>

二、编程式跳转

首先：
引入router模块，并且在构造函数中初始化，完成初始化之后就可以通过this调用。

//编程式导航
//引入Router模块
import { Router } from '@angular/router'
//初始化
constructor(public router:Router) { }
//调用
navigite(){
	this.router.navigate（['/news']）
}

三、普通路由传参

1.query传参

//直接在后面进行拼接
<a routerLink="home" [queryParams]="{id:123}">home</a>
//获取参数
ngOnInit(): void {
   this.route.queryParams.subscribe(res=>{
 	console.log(res)
  })
}

2.params传参

//动态设置值
const routes: Routes = [
  {path:"new/:id",component:NewsComponent}
];
//获取值
this.route.params.subscribe(res=>{
  console.log(res)
})

四、编程式路由传参

1.query

'传参的'
import { Router，NavigationExtras } from '@angular/router'
//初始化
constructor(public router:Router) { }
//调用
navigite(){
     let params:NavigationExtras = {
        Params:{'id':'123'},
        fragment:'achor'
      }
	this.router.navigate（['/news?'],parama）
}

2.params

'传参的'
import { Router } from '@angular/router'
//初始化
constructor(public router:Router) { }
//调用
navigite(){
	this.router.navigate（['/news','参数']）
}