Angular：路由的配置、传参以及跳转

①路由的配置

1、首先用脚手架新建一个项目，在路由配置时选择yes

2、用ng g component创建组件

3、在src/app/app-routing.module.ts中配置路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { FirstComponent } from './components/first/first.component';
import { TwoComponent } from './components/two/two.component';
import { FirstChildrenComponent } from './components/first-children/first-children.component';
import { TwoChildrenComponent } from './components/two-children/two-children.component';
import { ThreeComponent } from './components/three/three.component';

const routes: Routes = [
  // { path: '', component: FirstComponent }, //表示匹配到'/'路径,显示FirstComponent组件
  {
    path: 'first', component: FirstComponent,
    children: [  //设置子路由
      { path: 'firstC/:hxId', component: FirstChildrenComponent } //设置动态路由
    ]
  },
  {
    path: 'two', component: TwoComponent,
    children: [
      { path: 'twoC', component: TwoChildrenComponent }
    ]
  },
  {
    path: 'three', component: ThreeComponent
  },
  // { path: '**', component: FirstComponent }, //**表示匹配任意路径,显示FirstComponent组件
  { path: '', redirectTo: '/first', pathMatch: 'full' },  //表示匹配到'/'路径,重定向到'/first'路径
  // { path: '**', redirectTo: '/two', pathMatch: 'full' } //**表示匹配任意路径,重定向到'/first'路径
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

②路由传参

1、使用动态路由传参

在first.component.html中，进行路由跳转，传参

<p>我用动态路由进行传参</p>
<ul>
  <!-- 使用动态路由 -->
  <li><a [routerLink]="[ '/first/firstC/',1]">我是商品1的详情</a></li>
</ul>
<router-outlet></router-outlet>
<button (click)="tiaoZhuan()">js跳转路由</button>

在first-children.component.ts子组件中引入ActivatedRoute模块，接收参数

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-first-children',
  templateUrl: './first-children.component.html',
  styleUrls: ['./first-children.component.less']
})
export class FirstChildrenComponent implements OnInit {

  constructor(public route: ActivatedRoute) { }

  ngOnInit(): void {
    console.log(this.route);
    this.route.params.subscribe({
      next(res): any {
        console.log(res);
      }
    });
  }

}

2、使用get传参

在two.component.html中，进行路由跳转，传参

<p>我用get进行传参</p>
<ul>
  <!-- 使用get传参 -->
  <li><a [routerLink]="['/two/twoC']" [queryParams]="{hxId:1}">我是商品1的详情</a></li>
</ul>
<router-outlet></router-outlet>

在two-children.component.ts子组件中引入ActivatedRoute模块，接收参数

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-two-children',
  templateUrl: './two-children.component.html',
  styleUrls: ['./two-children.component.less']
})
export class TwoChildrenComponent implements OnInit {

  constructor(public route: ActivatedRoute) { }

  ngOnInit(): void {
    console.log(this.route);
    this.route.queryParams.subscribe({
      next(res): any {
        console.log(res);
      }
    });
  }

}

③js路由跳转

在first.component.html中，进行路由跳转

<p>我用动态路由进行传参</p>

<!-- js跳转路由 -->
<button (click)="tiaoZhuan()">js跳转路由</button>

在first.component.ts中实现，引入Router模块

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.less']
})
export class FirstComponent implements OnInit {

  constructor(public router: Router) { }

  ngOnInit(): void {
  }
  tiaoZhuan(): any {
    console.log(this.router);
    this.router.navigate(['/three']); //实现路由跳转，也可以用动态路由或者get方式传参
  }

}