How to pass the value and get the value from another page via routerlink in angular4?

问题

I want to pass a value with URL using routerLink and read that value on another page. Like I have Modules and Submodules. On select of first record the id of that record pass to User page. After read that Userid I want to show detail of that User and modules/submodules.

So How can I pass and get the Values(object)?

Userdetails Component class:

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') 
      }    

    }



  }

Router:

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

回答1:

define the router Link property binding to the html page

<button [routerLink]="['/user', user.id]" >Click<button>

then get the id using ActivatedRoute module

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

//import the ActivatedRoute form angular router

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

@Component({  
selector: '',  
template: ''.....})   
export class AppComponent  {  

constructor(private route : ActivatedRoute )

this.
route.
params.
subscribe(params => {
console.log(params)
});

} }

回答2:

Please follow this doc: https://angular.io/guide/router#heroes-list-optionally-selecting-a-hero .

You can send id param in your route which can then be read from paramMap:

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

回答3:

You can send data as Route paramater.Firstly you need to create a route like:

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

Then in your login function you can you can redirect to userdetail component by passing all data:

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') }
}

Now in your UserDetailComponent you can fetch route parameters as:

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

回答4:

Method 1: You can send value in parameters as: In Route.ts

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

In Login Component

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

In user component

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

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

Method 2: Using shared service

Create a 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);
    }
}

Send your value using shared service from Login component

  this.sharedService.setUser(obj)

In your User component get your value as

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

Method 3:

You know how to work with cookies

来源：https://stackoverflow.com/questions/48760281/how-to-pass-the-value-and-get-the-value-from-another-page-via-routerlink-in-angu

标签

angular

angular4-router