如何在angular4中通过routerlink传递值并从另一个页面获取值？

Question

我想使用

routerLink

通过 URL 传递一个值，并在另一个页面上读取该值。就像我有模块和子模块一样。在选择第一个记录时，该记录的 id 传递给用户页面。阅读该 Userid 后，我想显示该用户和模块/子模块的详细信息。

那么我如何传递并获取值（对象）？

Userdetails 组件类：

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

@Component({
  selector: 'userdetail',
  templateUrl: './userdetail.component.html',
  styleUrls: ['./userdetail.component.css']
})
export class UserdetailComponent implements OnInit {

  username: any;
   moduleid: any;
 submoduleid: any;
 login: any;

 constructor(private _route:ActivatedRoute){}
ngOnInit() {
 this._route.params.subscribe(params => {

   this.username = params['moduleid']

 }); 
}
}

登录组件类：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Userslogin } from 'app/users/userslogin';
import { Router } from '@angular/router';
import { UserloginService } from 'app/userlogin/userlogin.service';
import { User } from 'app/userlogin/user';


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

  myForm: FormGroup;

  user = new User;

 login: any;
 modules=[];
 module: any;
 usernam: any;
 pass: any;
 moduleid: any;
 submoduleid: any;

 submitted = false;

  i; j;

  constructor(private editionService: UserloginService, private router: Router) {

    const username = new FormControl('', Validators.required);
    const password = new FormControl('', Validators.required);

    this.myForm = new FormGroup({
      username: username,
      password: password
    });
}

   ngOnInit() {

  }



  loginuser() { 
    this.usernam = this.myForm.get('username').value; 
    this.pass = this.myForm.get('password').value; 
    this.editionService.getlogin(this.usernam, this.pass ).subscribe(
    login => this.login = login); 
    this.moduleid = this.login[0].moduleid; 




    if(this.login != null){ 
        this.router.navigate(['userlogin/userdetail', this.moduleid] ); 
     } 

     else { 
       alert('Click login') 
      }    

    }



  }

路由器：

export const UserloginRoutes: Routes =[{
    path: '',
        children: [
           {path: 'login',
                component:LoginComponent,
                },
       {path:'userdetail/:moduleid', component: UserdetailComponent}
        ]}]

Answer 1

请遵循此文档：https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero。

您可以在您的路线中发送 id 参数，然后可以从 paramMap 读取该参数：

this.route.paramMap
      .switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        // Use selectionId now
      });

Answer 2

您可以将数据作为Route paramater发送。首先，您需要创建如下路线：

{path:'userdetail/:userid/:moduleid/:submoduleid',component:UserDetailComponent}

然后在您的登录功能中，您可以通过传递所有数据重定向到 userdetail 组件：

loginuser() { 
this.username = this.myForm.get('username').value; 
this.pass = this.myForm.get('password').value; 
this.editionService.getlogin(this.username, this.pass ).subscribe(
login => this.login = login); 
this.moduleid = this.login[0].moduleid; 
this.submoduleid = this.login[0].submoduleid; 
this.userid = this.userid
alert(this.login);  
if(this.login != null){ 
    this.router.navigate(['/userdetail',this.userid, this.moduleid, this.submoduleid]); 
 } else { alert('Click login') }
}

现在在您的 UserDetailComponent 中，您可以获取路由参数：

constructor(private _route:ActivatedRoute){}
ngOnInit() {
this._route.params.subscribe(params => {
  this.userid = params['userid']
  this.moduleid = params['moduleid']
  this.submoduleid = params['submoduleid']
}); 
}

Answer 3

方法1：您可以在参数中发送值： 在 Route.ts

中

{ path: 'user/:user', component: UserComponent},

在登录组件中

 this.router.navigate(['/user',loginInfo]);  //loginInfo is data you want to send

在用户组件中

import { Router, ActivatedRoute } from '@angular/router';
constructor(private router:Router, private _route: ActivatedRoute)

  ngOnInit() {
      this._route.params.subscribe((params)=>{
       console.log(params)
      })
}

方法二：使用共享服务

创建一个 shared.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { BehaviorSubject } from 'rxjs/BehaviorSubject'

@Injectable()
export class SharedService {

    private user= new BehaviorSubject<any>([]);

    currentDetail = this.user.asObservable();
    setUser(user?: any) {
        this.user.next(user);
    }
}

使用来自登录组件的共享服务发送您的价值

  this.sharedService.setUser(obj)

在您的用户组件中获得您的价值

this.sharedService.currentDetail .subscribe(detail=>{
      console.log(detail)  //detail is data you send in shared service
       })

方法三：

您知道如何使用 cookies