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

定义路由器链接属性绑定到html页面

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

然后使用ActivatedRoute模块获取id

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

//导入ActivatedRoute表单角度路由器

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

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

constructor(private route : ActivatedRoute )

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

} }

Answer 2

方法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)
      })
}

方法2 ：使用共享服务

创建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
       })

方法3 ：

您知道如何使用 Cookie

Answer 3

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

您可以在路线中发送id param，然后可以从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 4

您可以将数据发送为路线参数。首先，您需要创建一条路线，如：

{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']
}); 
}

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

4 个答案: