0
点赞
收藏
分享

微信扫一扫

angular使用router收发数据

J简文 2022-03-12 阅读 32

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

举报

相关推荐

0 条评论