Angular 路由传值

1、get传值（‘?’ 后面拼接参数）

routing中配置：

const routes: Routes = [{ path: 'news', component: NewsComponent }],

要传值的组件：

html中跳转：

<div [routerLink]="['/news']" [queryParams]="{id: '11'}">

queryParams 里的 id 会出现在url的问号 ’ ? ’ 后面。

接受值的组件：

// 在ts中引入：
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}   // 构造函数中声明
// 获取：
ngOnInit() {
  this.route.queryParams.subscribe((data) => {
  // data是一个对象，里面有传过来的值
     this.id = data.id;
  });
}

结果：

2、动态路由传值跳转

routing中配置：

const routes: Routes = [{ path: 'news/:id', component: NewsComponent }],
// 这个id就是一个动态值，可以让我们在url中动态输入

要传值的组件：

html中跳转：

<div [routerLink]="['/news', '11']">

接受值的组件：

// 在ts中引入：
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}   // 构造函数中声明
// 获取：
ngOnInit() {
  this.route.params.subscribe((data) => {
  // data是一个对象，里面有传过来的值
     this.id = data.id;
  });
}

注意：这个data.id中的id是在routing中配置的动态路由中的参数

结果：

3、动态路由的JS跳转

传值的组件：

html中：

<button (click)="goNews()">点我跳转</button>

ts中：

// 在ts中引入：
import { Router } from '@angular/router';
constructor(private router: Router) {}   // 构造函数中声明

goNews() {
	// 普通路由
	this.router.navigate(['/home']);
	// 动态路由
	this.router.navigate(['/home/', '11']);
}

接受值的组件：

// 在ts中引入：
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}   // 构造函数中声明
// 获取：
ngOnInit() {
  this.route.params.subscribe((data) => {
  // data是一个对象，里面有传过来的值
     this.id = data.id;
  });
}

注意：这个data.id中的id是在routing中配置的动态路由中的参数

结果：

4、路由get传值的js跳转（ ‘?’ 后面拼接参数）

传值的组件：

html中：

<button (click)="goNews()">点我跳转</button>

ts中：

// 在ts中引入：
import { Router, NavigationExtras } from '@angular/router';
constructor(private router: Router) {}   // 构造函数中声明

goNews() {
	const myQueryParams: NavigationExtras = {
	queryParams: {
		id: '11',
		name: 'tom'
	}
};
this.router.navigate(['/team-project'], myQueryParams);
}

接受值的组件：

// 在ts中引入：
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}   // 构造函数中声明
// 获取：
ngOnInit() {
  this.route.queryParams.subscribe((data) => {
  // data是一个对象，里面有传过来的值
     this.id = data.id;
  });
}

结果：

5、两者结合传值

routing中配置：

const routes: Routes = [{ path: 'news/:id', component: NewsComponent }],
// 这个id就是一个动态值，可以让我们在url中动态输入

传值组件：

const myQueryParams: NavigationExtras = {
	queryParams: {
		name: 'tom',
		age: '22'
	}
};
this.router.navigate([`/news/11`], myQueryParams);

结果：