[JavaScript知识库]angular使用router收发数据

angular使用router收发数据

1.发送数据 参考网址：https://www.cnblogs.com/liyfya/p/13436122.html

import { Component, OnInit } from '@angular/core';
import {User} from "../../bean/user";
import {UserService} from "../../service/user.service";

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

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

  users:User[] | undefined;

  constructor(private userService:UserService,private router:Router) { }

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers():void{
    this.userService.getUsers().subscribe(users => this.users = users);
  }

  //点击事件  发送数据
  getClick(user:User){
    console.log('click the wrs item'+user.name)
    let navigationExtras:NavigationExtras = {
      queryParams:{'id':'17796'}
    }
    this.router.navigate(['userDetail'],navigationExtras).then((r: any) => console.log(r))
  }

}

2.接收数据

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

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


@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {

  id:string | undefined;

  //构造方法里面做数据接收，把id赋值给自定义的id，并在界面展示
  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe((r: any) => {
      this.id = r.valueOf().id;
    })
  }

  ngOnInit(): void {
  }

}

end