Angular-路由跳转传值 动态路由传值 js跳转传值

1.新建一个组件

ng generate component routeCompinentChuanZhi

2.app-routing.module.ts中配置路由

import { RouteComponentChuanZhiComponent } from './conponent/route-component-chuan-zhi/route-component-chuan-zhi.component';

const routes: Routes = [
  {path:'rc1',component:RouteComponent01Component},
  {path:'rc2',component:RouteComponent02Component},
  {path:'rczc',component:RouteComponentChuanZhiComponent},
  //匹配不到路由的时候加载的组件 或跳转的路由
  {path:'**',redirectTo:'rc1'}
];

3.在route-component01.html中新建一个变量list并传值:

ts文件:

public list:any[]=[];

constructor() { }

ngOnInit(): void {
  for (let i = 0; i < 10; i++) {
    this.list.push("这是第"+i+"条数据");
  }
}

html:
<a [routerLink]="['/rczc']" routerLinkActive="active">rczc(跳转到route-component-chuan-zhi)</a>
<ul>
  <li *ngFor="let item of list;let key=index">
    <!--  传统get传值  -->
    <!--    <a href="/xxx?aid=123">{{key}}&#45;&#45;{{item}}</a>-->
    <a [routerLink]="['/rczc']" [queryParams]="{aid:key,name:'Tom'}">{{key}}--{{item}}</a>

  </li>
</ul>

4.在rczc目标页面获取上页面传递过来的数据

在component.ts文件中注入ActivatedRoute并在构造函数中声明

import { ActivatedRoute } from '@angular/router';

constructor(public route:ActivatedRoute) { }

ngOnInit(): void {
  this.route.queryParams.subscribe((data) => {
    console.log(data.aid+"---"+data.name);
  })
}

拓展路由传值

动态路由传值

1) const routes: Routes = [
  {path:'rczc/:aid',component:RouteComponentChuanZhiComponent}
];

2) 

<ul>
  <li *ngFor="let item of list;let key=index">
    <a [routerLink]="['/rczc/',key]">{{key}}--{{item}}</a>
  </li>
</ul>

3) 取值和非动态路由传值一样

 

动态路由的js跳转

引入Router并注入

import { Router } from '@angular/router';

html:
<button (click)="goNewPage()">js跳转路由</button>

goNewPage(){
  //动态路由跳转
  // this.router.navigate(['/rczc01/','12422']);
  //普通路由跳转
  this.router.navigate(['/rczc']);
}

路由get传值js跳转

1.引入NavigationExtras

import { Router, Navigation } from '@angular/router';

2.定义一个goNewPage01方法执行跳转,用Navigation配置传参

goNewPage01(){
  let navigationExtras: NavigationExtras = {
    queryParams:{'session_id':'123'},
    fragment: 'anchor'
  };
  this.router.navigate(['/rczc'],navigationExtras);
}

3.获取get传值

在component.ts文件中注入ActivatedRoute并在构造函数中声明

import { ActivatedRoute } from '@angular/router';

constructor(public route:ActivatedRoute) { }

ngOnInit(): void {
  this.route.queryParams.subscribe((data) => {
    console.log(data.aid+"---"+data.name);
  })
}