跳转法一

一、引入

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

二、创建跳转事件

//home.ts
import {Router} from "@angular/router";
export class HomeComponent implements OnInit {
public id:string='22222'
  constructor(private router:Router) { }//这里要添加
  ngOnInit() {
  }
  handleClick(){
    this.router.navigate(['/detail'])
  }
}

三、跳转事件传值

 handleClick(){
    this.router.navigate(['/detail',this.id])
  }

四、接收

//detail.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router'
@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  constructor(public route:ActivatedRoute) { }
p
  ngOnInit() {
    this.route.params.subscribe(res=>{
      console.log(res)
    })
  }
}

跳转法二

一、引入

//home.ts
import {Router,NavigationExtras} from "@angular/router";

二、跳转事件

export class HomeComponent implements OnInit {
public id:string='22222'
  constructor(private router:Router) { }
  ngOnInit() {
  }
  handleClick(){
    let NavigationExtras:NavigationExtras={
      queryParams:{
        "id":this.id
      }
    }
    this.router.navigate(['/detail'],NavigationExtras)
  }
}

三、接收

//detail.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router'
export class DetailComponent implements OnInit {
  constructor(public route:ActivatedRoute) { }
  ngOnInit() {
    this.route.queryParams.subscribe(res=>{
      console.log(res)
    })
  }
}