Angular 2/4如何在app组件中获取路由参数？

问题描述：

由于我是角度2/4的新手，我无法根据需要设置新的应用程序。Angular 2/4如何在app组件中获取路由参数？

我想构建一个应用程序，将从另一个应用程序调用。调用应用程序将发送一些参数，如令牌，用户名，应用程序ID等。

现在，在角度2/4中，app.component是我们的登陆组件，每个第一个请求都会经过它。所以，我想在应用程序组件中获取这些参数，并加载一些用户详细信息，进行本地会话并转移到其他内容。

问题是当我试图访问这些参数我收到任何东西。

这里将开始我的角度应用程序的URL： http://localhost:86/dashboard?username=admin&token=xyz&appId=8

这里是我的路由文件代码：

const routes: Routes = [ 
 
    { 
 
    path: 'dashboard/:username, token', component: AppComponent 
 
    } 
 
]; 
 

 
@NgModule({ 
 
    imports: [RouterModule.forRoot(routes)], 
 
    exports: [RouterModule] 
 
}) 
 
export class AppRoutingModule { 
 

 
}

这里是我的应用程序组件代码：

import { Component, OnInit } from '@angular/core'; 
 
import { AuthenticationService } from 'app/services/authentication/authentication.service'; 
 
import { User } from 'app/models/user/user'; 
 
import { AppConfig } from 'app/helpers/AppConfig'; 
 
import { ActivatedRoute, Router } from '@angular/router'; 
 

 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 
export class AppComponent implements OnInit { 
 
    _user: User = new User(); 
 
    obj: any; 
 
    error: any; 
 

 
    loginName: string; 
 
    private id: any; 
 

 
    constructor(
 
    private authenticationService: AuthenticationService, 
 
    private config: AppConfig, 
 
    private route: ActivatedRoute, 
 
    private router: Router 
 

 
) { } 
 

 
    ngOnInit() {  
 
    this.loadCurrentUserDetail(); 
 
    this.getParamValues() 
 

 
    } 
 

 
    getParamValues() { 
 
    this.id = this.route.queryParams.subscribe(params => {  
 
     this.loginName = params['username']; 
 
    }); 
 
    }

这里params为空的，不知道为什么？

在此先感谢！

由于在图像参数对象中没有任何东西。

答

这篇文章解决的问题。 here

我需要创建一个单独的组件根，并在那里我保持我的路由器插座，并添加此组件作为我的启动模块，它的工作！如果我有我超过50的声望，我不会在同一个职位上感谢他。感谢的人@Fabio安栋梁

答

更改这个

const routes: Routes = [ 
    { 
    path: 'dashboard/:username', component: AppComponent 
    } 
];

路由组件

import {Router, ActivatedRoute, Params} from '@angular/router'; 
import {OnInit, Component} from '@angular/core'; 
import {Subscription} from 'rxjs/Subscription'; 

@Component({...}) 
export class MyComponent implements OnInit { 

    subscription:Subscription; 

    constructor(private activatedRoute: ActivatedRoute) {} 

    ngOnInit() { 
    // subscribe to router event 
    this.subscription = this.activatedRoute.queryParams.subscribe((params: Params) => { 
     let userId = params['username']; 
     let token = params['token']; 
     console.log(userId); 
     }); 
    } 

    ngOnDestroy() { 
    // prevent memory leak when component is destroyed 
    this.subscription.unsubscribe(); 
    } 


}

我添加了一些截图，也没有工作 –

有什么错误？ –

没有只有params ovject是空的。通常情况下，它里面会有关键值对，但它是空的。 –

答

这是你的方式在5角去：

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

constructor(private activeRoute: ActivatedRoute){} 
ngOnInit() { 
    console.log(this.activeRoute.snapshot.params['username']); 
}

Angular 2/4如何在app组件中获取路由参数？

相关推荐