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();
}
}
答
这是你的方式在5角去:
import { Router , ActivatedRoute } from '@angular/router';
constructor(private activeRoute: ActivatedRoute){}
ngOnInit() {
console.log(this.activeRoute.snapshot.params['username']);
}
我添加了一些截图,也没有工作 –
有什么错误? –
没有只有params ovject是空的。通常情况下,它里面会有关键值对,但它是空的。 –